11.20 CSS 弹性行(Flex Lines)

弹性容器中的弹性项放置在弹性行中并与之对齐

弹性容器中的弹性项放置在弹性行(flex lines)中并与之对齐。弹性容器可以是单行(single-line)或多行(multi-line),这取决于弹性包装(flex-wrap)属性:

  • 单行弹性容器把所有元素摆放在一行中,即使会出现内容溢出。

  • 多行弹性容器将把内容拆分到多行中,就像文本在宽度超出时会自动换行一样。 当附加行被创建时,它们进入沿垂直轴线(cross axis)的弹性容器的堆栈中(根据flex-wrap的属性值)。每行包含至少一个弹性项目,除非弹性容器本身是空的。

下面的例子演示了多个按钮在弹性行中的放置情况:

由于容器是300px宽,只有3个项目能适配进单个行内。它们占用了240px,留下60px剩余空间。 因为flex-flow属性通过wrap值指定弹性容器为多行容器,所以该弹性容器将创建一个附加行来包含最后一个项目。

一旦内容被拆分成多行,各行是独立放置的,弹性长度和 justify-content 以及 align-self 属性仅考虑单个行内的项目。

在一个多行弹性容器中(乃至实际未出现拆行,只有一行),每行的cross size是必须包含该行中弹性项目的最小尺寸(按照align-self对齐后),并且这些弹性行在弹性容器中按照align-content属性对齐。 在一个单行弹性容器中,该行的cross size就是弹性容器的cross size,并且align-content不起作用。该行的main size总是和弹性容器内容框的main size相同。