Flexbox布局语法速查手册

display

w3.org/TR/css-flexbox-1/#flex-containers
一些文字内容
.parent { display: flex; }

一个flex父容器元素能给它的子元素建立一种新型的flex内容布局。这种布局其实是和将元素设定为display:block是很相似的,只是在flex布局里block换成了flex。在flex布局里没有float特征,flex父容器的margin不会和其子元素的margin有重叠效果。Flex父容器元素所形成的block容器特性跟普通的block容器元素所表现的特征完全一样。overflow特征也适用于Flex父容器元素

Flex父容器元素并不等同于普通的block元素,有一些block元素具有的属性在flex父元素上并不适用。特别的:

如果一个元素被指定为display:inline-flex,那么,在某些情况下,它的display属性会按做flex来计算: 在CSS 2.1 Section 9.7的表格里将会增加有一行,在 'Specified Value' 列里多出inline-flex行和在 'Computed Value' 列里多出flex

适用元素: 所有元素.

flex
指定此元素为block级别的flex布局的父元素/Flex容器元素。
inline-flex
指定此元素为inline级别的flex布局的父元素/Flex容器元素。

flex-direction

w3.org/TR/css-flexbox-1/#flex-direction-property
.parent { display: flex; flex-direction: row; height: 100%; }

flex-direction属性指明flex子元素在flex父容器内的布局方向,也就是是flex父容器的排列方向。flex子元素的布局方向就根据这个值。

注意:这里的反向(reverse)值并不是指排序的反向,跟writing-modedirection一样,它是指将布局排列方向反向。元素的渲染顺序,语音输出顺序,导航顺序都不受影响。

适用元素: Flex父容器元素.

初始值: row.

row
flex布局的排列方向跟当前writing modeinline axis方向相同。它们的main-startmain-end 端等同于当前writing mode下的inline-startinline-end 端。
row-reverse
类似 row 值,只是它们的main-startmain-end 端互换,也就是反向。
column
flex布局的排列方向跟当前writing modeblock axis方向相同。它们的main-startmain-end 端等同于当前writing mode下的block-startblock-end 端。
column-reverse
类似 column 值,只是它们的main-startmain-end 端互换,也就是反向。

flex-wrap

w3.org/TR/css-flexbox-1/#flex-wrap-property
.parent { display: flex; align-items: flex-start; flex-wrap: nowrap; height: 100%; } .child { width: 40%; }

flex-wrap属性控制着flex容器是单行还是多行,还有它的 cross-axis 换行方向,也就是新行的布局方向。

对于非 wrap-reverse 的值,cross-start端等同于当前writing mode下的inline-startblock-start端。也就是cross axis换行方向的起始端。而cross-end端是cross-start端的反向端。当flex-wrap值为wrap-reverse时,cross-startcross-end端互换。

适用元素: Flex父容器元素.

初始值: nowrap.

nowrap
flex容器是单行显示子元素。
wrap
flex容器是多行显示子元素,也就是可以换行。
wrap-reverse
wrap值类似,只是换行方向反过来。

flex-flow

w3.org/TR/css-flexbox-1/#flex-flow-property
.parent { display: flex; flex-flow: row nowrap; height: 100%; } .child { width: 40%; height: 40%; }

flex-flow属性是flex-direction属性和flex-wrap属性的组合体简写,用来控制flex容器的排列方向和换行方向。

适用元素: Flex父容器元素.

初始值: row nowrap.

order

https://www.w3.org/TR/css-flexbox-1/#order-property

order属性可以控制某个flex子元素在flex容器中出现的位置顺序,通过给它一个相关的值。 order属性的值是 一个<数字>,指明flex子元素的排列顺序如何变更。

flex容器排列拥有指定顺序的flex子元素时,这个值小的排在前面,值大的靠后排。值相同的按原始顺序排。零值等同于原顺序。这个值会影响渲染输出顺序,效果跟重新修改源代码后显示的效果相同。

这个属性对非flex子元素无效果,除非将来规范做出修改。

适用元素: flex子元素.

初始值: 0.

justify-content

w3.org/TR/css-flexbox-1/#justify-content-property
.parent { display: flex; justify-content: flex-start; height: 100%; }

justify-content属性用来设定flex容器内子元素沿当前排列方向的对齐方式。这种对齐是在所有可以自由伸缩的长度和所有auto margins距离确定后完成的。通常,这个属性是用来分配所有flex子元素在一行排列上的剩余空间,或者是虽然没有剩余空间但元素宽宽度可以自由伸缩的情况。它也可以用来控制当子元素长度溢出时的对齐问题。

适用元素: Flex父容器元素.

初始值: flex-start.

flex-start
Flex子元素向行首对齐。第一个子元素的起始边跟行的起始边对齐,之后的子元素的起始边跟前一个的末边对齐,依次类推。
flex-end
Flex子元素向行的末端对齐。flex子元素的最后一个元素的末边和行的末端对齐,倒数第二个子元素的末边和倒数第一个的始边对齐,依次类推。
center
Flex子元素向行中间对齐。flex子元素相互靠拢,然后整体向行的中间对齐。行首和行末的剩余空间是相等的。如果子元素总长度超出容器宽度,那两边溢出的宽度的相同的。
space-between
Flex子元素平均分布在行上。如果子元素总长度溢出或只有一个子元素,那它的效果等同于flex-start的效果。否则,第一个子元素的起始边和行的起始边对齐,最后一个子元素的终边和行的末边对齐,剩余其它元素都等距离分布在剩余空间里。
space-around
Flex子元素平均分布在行上,但行首和行末留有1/2的其它子元素之间的空间。如果子元素总长度溢出,或只有一个子元素,那么时的效果等同于center效果。否则,子元素平均分布在行上,它们之间的空间距离是相同的。而且行后和行末也空间,但空间的宽度只有子元素之间的宽度的一半。

align-items

w3.org/TR/css-flexbox-1/#propdef-align-items
.parent { display: flex; align-items: stretch; height: 100%; }

这个属性用来调整Flex子元素在列方向上的对齐方式,它跟justify-content的作用非常相似,只是一个作用于行方向上的对齐,一个作用于列方向上的对齐。align-items用于设定flex容器里所以子元素的缺省列对齐方式,包括匿名的flex子元素。而使用下面要讲的align-self属性可以覆盖父容器指定的align-items属性。(对于匿名flex子元素,它的align-self和父元素指定的align-items值相同。)

如果flex子元素的列方向上的margin有值,则无效。

对于绝对定位的元素,auto值表明是自动计算。其它情况下,autoalign-self等同于父元素指定的align-items值,如果没有父元素,则设置为stretch

适用元素: Flex父容器元素.

初始值: stretch.

flex-start
flex子元素向列首靠拢对齐。
flex-end
flex子元素向列尾靠拢对齐。
center
flex子元素向列中靠拢对齐。如果子元素在列方向上的高度溢出,则上下溢出的长度相同。
baseline
If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start.

Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line.

stretch
如果子元素列方向上的高度值为auto,并且列方向上没有设定margin值,则子元素会拉伸。拉伸的高度是最大化的和列的高度相同。但同时还会受min-height/min-width/max-height/max-width的约束。

注意: 如果flex容器的高度小于这些约束高度,则子元素会溢出。

溢出时,列首边和子元素起始边对齐,另外一端溢出。

align-self

w3.org/TR/css-flexbox-1/#propdef-align-self

此属性和justify-content的作用很相似,不同的是,justify-content是让元素在行方向上对齐,而这个属性是在列方向上对齐。另外align-items属性是作用在flex父元素上,设定容器内所有子元素的缺省列对齐方式,而此属性是作用在单个子元素上,设定指定子元素的列对齐方式。(对于匿名的flex子元素,align-selfalign-items的效果是一样的)

如果flex子元素的列方向上的margin有值,则无效。

对于绝对定位的元素,值为auto时,系统自动计算效果。其它情况下,如果align-self值为auto,效果根据父元素的align-self而定,如果没有父元素,则设置为stretch

适用元素: flex子元素.

初始值: auto.

flex-start
向列首对齐
flex-end
向列尾对齐
center
向列中对齐(如果子元素高度溢出,则列两端溢出高度相同。)
baseline
If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start.

Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line.

stretch
如果flex子元素的高度设置等同于 auto,且列方向上的margin值不少 auto, 则flex子元素拉伸。拉伸的高度是尽可能的达到容器的最大高度,但同时仍受min-height/min-width/max-height/max-width的限制。

注意:上面的这些约束的高度如果是超出了容器的高度,这子元素会溢出。

溢出时子元素跟列首对齐,末端溢出。

align-content

w3.org/TR/css-flexbox-1/#align-content-property
.parent { display: flex; flex-wrap: wrap; align-content: stretch; height: 100%; } .child { width: 30%; }

align-content属性的作用是在flex子元素是多行时,而且容器内还有剩余空间时,设定子元素的对齐方式,跟justify-content相似。注意:这个属性对单行子元素无效果。属性值的含义是:

注意: 只有容器内是多行子元素时,且列方向上有剩余空间时有效,因为如果是单行,子元素的高度会自动拉伸填满剩余高度。

适用元素: flex父容器.

初始值: stretch.

flex-start
子元素向列首对齐,子元素各行紧挨着前一行向列首对齐。
flex-end
子元素向列尾对齐,子元素各行紧挨着后一行向列尾对齐。
center
子元素各行向列中对齐。各行之间不留空间。而列首和列尾剩余的空间是相同高度。如果子元素高度溢出,在列首和列尾溢出的高度相同。
space-between
子元素各行平均分布在列高度上。并且列首和列尾不留空间,各子元素之间的空间距离相等。
space-around
子元素各行平均分布在列高度上,各列之间的距离相等,并且列首和列尾也有空间,空间的高度是各列之间的距离的一半。如果子元素的高度溢出,则此属性的效果等同于center
stretch
各列等高度的拉伸,填满整个列高度。如果子元素高度溢出,在此属性效果等同于flex-start

flex-grow

w3.org/TR/css-flexbox-1/#flex-grow-property

flex-grow属性用来设定felx子元素的扩展因子,值的类型是<数字>。负值无效。

适用元素: flex子元素.

初始值: 0.

flex-shrink

w3.org/TR/css-flexbox-1/#flex-shrink-property

flex-shrink属性用来设定flex子元素的收缩因子,值的类型是 <数字>。负值无效。

适用元素: flex子元素.

初始值: 1.

flex-basis

w3.org/TR/css-flexbox-1/#flex-basis-property

flex-basis属性用来设定flex子元素的伸缩度,它能接受的值和widthheight属性能接受的值一样,而且还可以设置成content

如果这个属性的值不是指定成autocontent, flex-basis属性的作用在横向上和width属性的作用是一样的。如果值设定为auto,则效果等同于content值。例如,对于百分比的值来说,它的大小决定于容器的大小。如果容器的大小不确定,则等效于 content 值。反而推之,flex-basis可以决定容器的宽度,除非有 box-sizing 等属性的设定。

适用元素: flex items.

初始值: auto.