Flexbox布局语法速查手册

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

flex-direction

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

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

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

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

初始值 : row.

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

flex-wrap

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

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

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

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

初始值 : nowrap.

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

flex-flow

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

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

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

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

适用元素 : flex子元素.

初始值 : 0.

justify-content

w3.org/TR/css-flexbox-1/#justify-content-property

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

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

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

对于绝对定位的元素， auto 值表明是自动计算。其它情况下， auto 值 align-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-self 和 align-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 .

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

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-basis 属性用来设定flex子元素的伸缩度，它能接受的值和 width 和 height 属性能接受的值一样，而且还可以设置成 content 。

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

适用元素 : flex items.

初始值 : auto.