究竟什么是flex-basis属性集？

究竟什么是flex-basis属性集？

flex-basis

允许您在计算其他任何内容之前指定元素的初始/开始大小。它可以是百分比或绝对值。

但是，它 不是 弯曲增长/收缩特性的起点。浏览器根据元素的初始大小是否超过横轴的宽度（常规意义上为宽度）来确定何时包装元素。

根据您的小提琴，最后一个移到窗口下方的原因是，父级的宽度已被先前的同级完全占据，并且当您允许内容换行时，无法容纳第一行的元素将变为推送到下一行。由于它

flex-grow

是一个非零值，它将简单地拉伸以填充第二行中剩余的所有空间。

如果您看小提琴，我已经修改了最后一项以具有新的尺寸声明：

.size3 {  flex: 0 1 300px;}

您将意识到该元素将按预期跨度300px。但是，当调整flex-grow属性使其值超过0时，它将拉伸以填充行，这是预期的行为。由于在_新行上下文_ 中没有可比较的同级，因此1到无穷大之间的整数将不会影响其大小。

因此，

flex-grow

可以看作是这样：

• 0

  ：（默认值） 请勿拉伸 。大小可以等于元素的内容宽度，也可以服从

  flex-basis

  。

• 1

  ： 伸展 。

• ≥2

  （整数 n ）： Stretch 。例如，将是同一行上其他元素的大小的 n 倍

  flex-grow: 1

  。