什么是flex-basis属性设置的？

Question

将max-width或width设置为弹性项而不是flex-basis之间是否存在差异？

这是＆＃34;突破点＆＃34;对于flex-grow/shrink属性？

当我设置flex-wrap: wrap时，浏览器如何决定将项目下移到新行？是根据他们的宽度还是＆＃39; flex-basis＆＃39;？

示例：http://jsfiddle.net/wP5UP/ 最后两个框具有相同的flex-basis: 200px，但仅其中一个框在窗口介于300px和400px之间时向下移动。为什么呢？

Answer 1

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

然而，不是flex-grow / shrink属性的突破点。浏览器根据元素的初始大小是否超过横轴的宽度（传统意义上的宽度）确定何时包装元素。

基于你的小提琴，最后一个向下移动窗口的原因是因为父级的宽度已被前一个兄弟姐妹完全占用 - 并且当你允许内容换行时，那些元素无法适应第一行被推送到后续行。由于flex-grow是非零值，因此只需拉伸以填充第二行中剩余的所有空格。

See demo fiddle (modified from yours)

如果你看一下这个小提琴，我已经修改了最后一个项目以获得一个新的尺寸声明：

.size3 {
  flex: 0 1 300px;
}

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

因此，flex-grow可以看作是：

• 0 :(默认值）不伸展。大小到元素的内容宽度，或服从flex-basis。
• 1： Stretch 。
• ≥2（整数 n ）：拉伸。例如， n 乘以同一行flex-grow: 1的其他元素的大小。

Answer 2

好文章https://gedd.ski/post/the-difference-between-width-and-flex-basis/

  

flex-basis是：弹性项目放置在容器中之前的大小   伸缩容器。这是商品的理想尺寸或假设尺寸。但   flex-basis不能保证尺寸！浏览器将   将项目放入其伸缩容器中，情况就会发生变化。经常弯曲   毕竟，容器将没有足够的空间，或者会有额外的空间   其项目的flex-basis值相加。