box-lines

box-lines CSS 属性确定盒子是否可以具有单行或多行（对于水平方向的盒子为行，对于垂直方向的盒子为列）。

默认情况下，水平盒子会将其子元素布局在单行中，而垂直盒子会将其子元素布局在单列中。可以使用 box-lines 属性更改此行为。默认值为 single，这意味着所有元素都将放置在单行或单列中，任何不适合的元素都将被视为溢出。

但是，如果指定了 multiple 值，则允许盒子扩展到多行（即多行或多列）以容纳其所有子元素。盒子必须尝试将其子元素尽可能地放置在最少的行数上，如果需要，通过将所有元素缩小到其最小宽度或高度。

如果水平盒子中的子元素在缩小到最小宽度后仍然无法在一行中显示，则子元素将逐个移动到新的一行，直到前一行剩余的元素能够容纳。这个过程可以重复任意多行。如果一行只包含一个无法容纳的元素，则该元素应保留在该行并溢出盒子。后面的行在普通方向的盒子中放置在前面行的下方，在反向方向的盒子中放置在上方。一行的高度是该行中最高子元素的高度。除了每行中最高元素上的边距外，行之间不会出现额外的空间。在计算行高时，计算值为 auto 的边距应视为值为 0。

垂直盒子中的子元素也会发生类似的过程。普通方向盒子中的后面行放置在前面行的右侧，反向方向盒子中的后面行放置在左侧。

确定行数后，计算值为非 0 的 box-flex 元素会根据需要进行拉伸，以尝试填充行中剩余的空间。每行独立计算 flex，因此在评估 box-flex 和 box-flex-groups 时，只会考虑该行上的元素。由 box-pack 属性指定的元素在行中的排列方式也会针对每行独立计算。

/* Keyword values */
box-lines: single;
box-lines: multiple;

/* Global values */
box-lines: inherit;
box-lines: initial;
box-lines: unset;

box-lines =
  single | multiple

div {
  display: box;
  box-orient: horizontal;
  box-lines: multiple;
}