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

Question

设置max-width或设置width为弹性项目而不是设置之间有区别flex-basis吗？

是flex-grow/shrink属性的“转折点” 吗？

当我设置flex-wrap: wrap浏览器时，如何确定将项目下移到新行的哪一点？是根据他们的宽度还是“弹性基础”？

示例：最后两个框具有相同的功能flex-basis:200px，但是当窗口在300px至400px之间时， 只有 其中一个向下移动。为什么？

Answer 1

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。