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

Question

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

这是flex-grow/shrink物业的"突破点" 吗？

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

示例:http://jsfiddle.net/wP5UP/ 最后两个框具有相同的内容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):拉伸.例如,将是同一行上其他元素大小的n倍flex-grow: 1.