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相同。