滚动容器的基础知识 要创建一个滚动容器,以下是我们需要做的基本内容 使用 overflow 一种将项目彼此相邻显示(内联)的方法 举个例子: <div class...解决方案,用于强制元素保持内联。...CSS Scroll Snap 简介 要在容器上使用scroll snap,它的子项目应该内联显示,这可以用我上面解释的方法之一来实现。...如果内容被添加、移动、删除或者重置大小,滚动偏移将被调整为保持静止在临时点上。 mandatory关键字意味着浏览器必须捕捉到每个滚动点。假设roll-snap-align属性有一个start值。...参见下图: 滚动容器的 start 子项目将吸附到其水平滚动容器的开始处。 滚动容器的 center 子项目将吸附到其滚动容器的中心。 滚动容器的 end 子项将对齐到其滚动容器的末尾。
滚动容器的基础知识 要创建一个滚动容器,以下是我们需要做的基本内容 使用 overflow 一种将项目彼此相邻显示(内联)的方法 举个例子: <div class...CSS Scroll Snap 简介 要在容器上使用scroll snap,它的子项目应该内联显示,这可以用我上面解释的方法之一来实现。...如果内容被添加、移动、删除或者重置大小,滚动偏移将被调整为保持静止在临时点上。 mandatory关键字意味着浏览器必须捕捉到每个滚动点。假设roll-snap-align属性有一个start值。...参见下图: image.png 滚动容器的 start 子项目将吸附到其水平滚动容器的开始处。 image.png 滚动容器的 center 子项目将吸附到其滚动容器的中心。...image.png 滚动容器的 end 子项将对齐到其滚动容器的末尾。
但是如果div设置了浮动,那么其宽度就是由内部元素的宽度所决定,这个特性和内敛盒子一样。 4、内联盒子具备块状盒子的特性:支持所有样式。...粘性定位 粘性定位可以被认为是相对定位和固定定位的混合,元素在跨越特定阈值前为相对定位,之后为固定定位。 层级的改变 使用属性z-index可以对元素的层级进行调整,默认元素的z-index值为0。...当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。 flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局。...那么在flex容器内,child-01的实际宽度就是: 400-\frac{400}{400+600}×[(400+600)-500]=200 child-02的实际宽度就是: 600-\frac{600...order 改变某一个flex子项的排序位置,默认值为0,如果元素设置为1,则排至最后,如果设置为负数,则排至第一位。
Flex容器会使子项目(伸缩项目)扩展来填满可用空间,或缩小他们以防止溢出容器。 最重要的是,Flexbox布局方向不可预知,他不像常规的布局(块就是从上到下,内联就从左到右)。...,是内联还是块取决于设置的值。...暂去掉子项目的order属性,我们先来看看初始时 和 加了 flex-grow后(item1 设为1,item2设为2)的区别 当direction为row时,将剩余空间吃透 ? ?...当direction为column 时,将剩余空间吃透 ? ? 3.flex-shrink(适用于子项目) 根据需要用来定义伸缩项目收缩的能力。负值无效。...flex-shrink: (默认值为: 1 即如果空间不足,该项目将缩小。) 好了,又有机会把子项目宽度设大了。
(IFC) 只包含行级盒子的容器会创建一个 IFC IFC 内的排版规则: 盒子在一行内水平摆放 一行放不下时,换行显示 text-align 决定一行内盒子的水平对齐 vertical-align...,只有某些容器会创建一个 BFC: 根元素 浮动、绝对定位、inline-block Flex 子项和 Grid 子项 overflow 值不是 visible 的块盒 display: flow-root...flex 上下文内元素的摆放流向 # justify-content 属性 控制 flex 上下文内主轴的元素摆放规则(水平对齐规则) # align-items 属性 控制 flex 上下文内侧轴...可以设置子项的弹性:当容器有剩余空间时,会伸展;容器空间不够时,会收缩。...flex-grow 设置拥有剩余空间时的伸展能力(注意:剩余空间不包括元素初始状态所占空间) flex-shrink 设置容器空间不足时收缩的能力(默认值为 1—— 即默认每个元素都能被压缩) flex-basis
前者会将元素作为块状弹性容器,若没有指定宽度,默认撑满一整行;后者会将元素作为内联弹性容器,若没有指定宽度,默认由内容撑开。...2.1 基本概念 1)父容器和子项目 设置了 display:flex 或者 display:inline-flex 的元素将成为父容器 (flex container) ,其内部所有子元素成为子项目...默认值为 0 ,即遵循 HTML 结构排列;可以是负值,数值越小越靠前。 image.png flex-grow 属性定义了父容器还有剩余空间时,子项目如何瓜分这些剩余空间。...其值为一个权重(扩张因子),子项目将按照设定的这个权重去瓜分父容器的剩余空间。...如果为 0(默认):即使有剩余空间,子项目也不会去瓜分 如果为整数,举个例子: 父容器宽度 500px,三个子项目的 width 分别为 100px,150px,100px。
块级格式化上下文 (Block Formatting Context):盒子在容器(包含块)内从上到下一个接一个地放置两个兄弟盒之间的竖直距离由 margin 属性决定同一个 BFC 内垂直 margin...:●flex子项目占的份数flex属性定义子项目分配剩余空间,用flex来表示占多少份数。...flex-shrink:定义项目的缩小比例;默认为1,即 如果空间不足,该项目将缩小;所有项目的flex-shrink为1:当空间不足时,缩小的比例相同;flex-shrink为0:空间不足时,该项目不会缩小...flex:1即为flex-grow:1,经常用作自适应布局,将父容器的display:flex,侧边栏大小固定后,将内容区flex:1,内容区则会自动放大占满剩余空间。...将CSS代码放在标签内部;内联样式,将CSS样式直接定义在HTML元素内部;移动端的布局用过媒体查询吗?通过媒体查询可以为不同大小和尺寸的媒体定义不同的css,适应相应的设备的显示。
Grid vs Flex Grid 布局与 Flex 布局有一定的相似性,都可以指定「容器」内部多个「项目」的位置。但是,它们也存在重大区别。...Flex 布局是「轴线布局」,只能指定项目针对轴线的位置,可以看作是「一维布局」。 Grid 布局则是将容器划分成行和列,产生单元格,然后指定项目所在的单元格,可以看作是「二维布局」。...start:将网格与容器的开始边缘对齐 end:将网格与容器的结束边缘对齐 center:将网格置于容器的中心 stretch:重新调整网格项的大小,以使网格填充容器的整个宽度 space-around...justify-items 如果我们想在列内对齐项目本身,我们可以使用 justify-items 属性: start:将项目与其单元格的开始边缘对齐 end:将项目与其单元格的结束边缘对齐 center...其值为以下几个: start:将网格项与其单元格的开始边缘对齐 end:将网格项与其单元格的结束边缘对齐 center:将网格项置于其单元格的中心 stretch:填充单元格的整个宽度(这是默认值)
Flex布局的语法规范经过几年发生了很大的变化,也给Flexbox的使用带来一定的局限性,因为语法规范版本众多,浏览器支持不一致,致使Flexbox布局使用不多 2、各属性详解**** 1.flex子项目在主轴的缩放比例...让子元素在父容器中间显示 space-between 项目位于各行之间留有空白的容器内。...左右的盒子贴近父盒子,中间的平均分布空白间距 space-around 项目位于各行之前、之间、之后都留有空白的容器内。...必须对父元素设置自由盒属性display:flex;,并且设置排列方式为横向排列flex-direction:row;并且设置换行,flex-wrap:wrap;这样这个属性的设置才会起作用。...space-between 项目位于各行之间留有空白的容器内。 space-around 项目位于各行之前、之间、之后都留有空白的容器内。
/index.css" /> 嵌入 p { color: red; } 内联 test 2.2...(即内容的宽度),box-sizing为 content-box 怪异盒模型(IE 盒模型):width 指 content 的宽度 + 左右 padding 值 + 左右 border 值,box-sizing...Context 只包含行级盒子的容器会创建一个 IFC IFC 内的排版规则 盒子在一行内平行摆放 一行放不下时,换行显示 text-align 决定一行内盒子的水平对齐 vertical-align...Flex 子项和 Grid 子项 overflow 值不为 visible 的块盒 display: flow-root; 2.8 Flex 布局 Flex 布局 | 赤蓝紫 (13535944743...2.9 Grid 布局 display: grid 使元素生成一个块级的 Grid 容器 使用 grid-template 相关属性将容器划分为网格 设置每一个子项占哪些行/列 暂时只是初略了解,之后还是得正式学
在容器中的每个单元块被称之为 flex item,每个项目占据的主轴空间为(main size),占据的交叉轴的空间为(cross size)。...align-items align-content display: flex; display: flex; 定义了一个 flex 容器(内联或块级取决于给定的值),为直接子元素提供一个弹性上下文。...如果所有 items 的 flex-grow 都设置为 1,则容器中的剩余空间将平均分配给所有 item。如果其中一个 item 的值为 2,则剩余空间将占用其他空间的两倍。...(最后一行包含的子项可能比前几行少,所以剩余空间可能会更大),这时 flex-grow 会起作用,若当前行所有子项的 flex-grow 都为 0,则剩余空间保留,若当前行存在一个子项的 flex-grow...会根据 flex-grow 设定的值放大(为 0 的项不放大) 当 flex-wrap 为 nowrap,且 items 的宽度之和超过父容器宽度时,flex-shrink 会起作用,item 会根据
所以包含在span标签内 *对于文字居中也h1,span,p等类似文字标签都可以这样设置居中 ---- 二、 div的垂直水平居中 这种方法同样适用于img,只需将child换成img就行,不再需要...水平居中,如果是文本(内联元素)text-align:center,div(块级元素)margin:0 auto;,,所以我就不写水平居中了,别嫌我懒哦 会使用到属性display:flex...和align-items 我大概说一下,display:flex,将对象作为弹性伸缩盒显示 align-items:定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。....main{/*给父容器设置*/ display:flex; align-items:center;/*所有子元素都垂直居中了*/ } ---- 四、使用css3 属性transform transform...translateY(50%);/*给子元素设置*/ transform: translateX(50%)也可以水平居中,但是上面已经说了,可以使用margin: 0 auot(块级),text-align(内联
在今天的文章中,我将告诉你我希望早点知道的最方便的几个Flutter小部件。 Spacer Spacer 创建一个可调整的空白空间,它占据 Flex 容器中小部件之间的任何剩余空间,例如行或列。...它提供了一个很好的过渡,使应用程序非常流畅。始终为其子小部件添加一个键以确保其正常工作。...SafeArea 此小部件为您的小部件添加填充,确保您的应用不会与操作系统和设备显示功能(如状态栏)发生冲突。...您可以包含内联链接、下划线文本、彩色文本等等。 Transform 这个小部件将您的动画游戏提升到一个全新的水平。它可以实现简单的动画,如旋转和缩放到更复杂的动画,如 3D 和倾斜动画。...,让我们为更好的使用Flutter加油吧。
如有漏掉的,还会陆续的补充进来,算做是一个备忘录吧。 [css居中] 1 水平居中 1.1 内联元素水平居中 利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。...此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效。...,通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。...布局(flex) 利用flex布局实现垂直居中,其中flex-direction: column定义主轴方向为纵向。...布局 利用flex布局,其中justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式;而align-items属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式
默认值为 0flex-shrink:1;指定了 flex 元素的收缩规则,子项的收缩所占的份数,默认值为1 当所有子项相加的宽度大于父项的宽度,每个子项减少的多出的父项宽度的 1/n felx-basis...,a 和 b 没有定义,但会根据默认值 1 来计算,可以看到总共将剩余空间分成了5份,其中 a 占 1 份,b 占 1 份,c 占 3 份,即 1:1:3,我们可以看到父项宽度定义为 400 px,子项被定义为...,最多 3 个子项一行,值为 (20%,25%] 时,最多 4 个子项一行,上面的例子中 flex-basis 的值为 20%,即每一个子项占据该行宽度的 20%,一行可排列 5 个子项,但我们一共有...10 个子项,将 10 个子项都排在一行,会导致溢出 flex 容器所以我们在父级添加了 flex-wrap 属性,指定 flex 元素单行显示还是多行显示,默认不换行,值为 nowrap,指定容器多行显示...如果弹性盒元素的行内轴与 cross 轴为同一条,则该值与 "flex-start" 等效其它情况下,该值将参与基线对齐stretch元素被拉伸到与容器相同的高度或宽度#main { width: 500px
如有漏掉的,还会陆续的补充进来,算做是一个备忘录吧。 1 水平居中 1.1 内联元素水平居中 利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。...此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效。...,通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。...布局(flex) 利用flex布局实现垂直居中,其中flex-direction: column定义主轴方向为纵向。...布局 利用flex布局,其中justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式;而align-items属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式
设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。...row 是默认 row-reverse 将起点变为右边 column 主轴为垂直方向,起点在上面 column-reverse 主轴为垂直方向,起点在下面 flex-wrap 指定 flex 元素单行显示还是多行显示...space-evenly和space-around类似,但是相邻flex项之间的间距,主轴起始位置到第一个flex项的间距,主轴结束位置到最后一个flex项的间距,都完全一样 stretchflex 子项的宽度和大于容器...,则各个子项根据自己的大小缩放来撑满容器,如果子项和的最小宽度大于容器,则会撑开容器,如果和小于容器则相当于flex-start flex-start从行首开始排列。...flex-grow 定义弹性盒子项(flex item)的拉伸因子,将相对于同一行上所有其他项目的大小总和进行缩放,这些项目将根据指定的值自动调整。它的值是number,负数无效。
| stretch;} 建立在主轴为水平方向时测试,即 flex-direction: row 默认值为 stretch 即如果项目未设置高度或者设为 auto,将占满整个容器的高度。...另外感谢 @王嘉成 在评论区的补充说明容器的 flex-wrap 与子项的 flex-shrink、flex-grow 之间的关系: 当 flex-wrap 为 wrap | wrap-reverse...,且子项宽度和不及父容器宽度时,flex-grow 会起作用,子项会根据 flex-grow 设定的值放大(为0的项不放大) 当 flex-wrap 为 wrap | wrap-reverse,且子项宽度和超过父容器宽度时...则剩余空间保留,若当前行存在一个子项的 flex-grow 不为0,则剩余空间会被 flex-grow 不为0的子项占据 当 flex-wrap 为 nowrap,且子项宽度和不及父容器宽度时,flex-grow...会起作用,子项会根据 flex-grow 设定的值放大(为0的项不放大) 当 flex-wrap 为 nowrap,且子项宽度和超过父容器宽度时,flex-shrink 会起作用,子项会根据 flex-shrink
css的display属性增加的flex值,意为:让容器的显示模式为弹性盒子。...说明: flex-basis的默认值为auto(无特定宽度值,取决于其它属性值),浏览器将超出的空间,按照各子项basis的值的比例进行空间收缩。...图例中5定义了flex-basis:400px,其余子项定义了flex-basis:200px,我们给父容器width定义为800px,5个子项相加之后即为1200px,超出父容器400px。...假定:这5个子项的比例为1:1:1:1:2,则多出来的400px要被分为6份,于是我们可以计算子项将被移除的溢出量是多少: flex-basis为400px的,被移除溢出量:400/6*2,即约等于133.33px...默认值为auto表示将根据column-count列的数量自动调整列宽。 column-count 最大列数。 columns 合写以上两个属性。第一个是列宽,第二个是列数。
领取专属 10元无门槛券
手把手带您无忧上云