什么是弹性基础属性设置?

max-widthwidth设置为弹性项目而不是flex-basis有什么区别?

它是flex-grow/shrink属性的“突破点”吗?

而当我设置flex-wrap: wrap行浏览器如何决定在哪一点下移项目到新行? 是根据它们的宽度还是“弹性基础”?

例如: http : //jsfiddle.net/wP5UP/最后两个框有相同的flex-basis: 200px ,但是当窗口在300px和400px之间时, 只有其中一个向下移动。 为什么?

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

但是,这并不是柔性增长/收缩性能的突破点。 浏览器根据元素的初始大小是否超出横轴的宽度(在传统意义上,即宽度)来确定何时包装元素。

根据你的小提琴,最后一个窗口向下移动的原因是因为父窗口的宽度已经完全被前面的同胞所占用,而当你允许内容换行的时候,推到后面的行。 由于flex-grow是一个非零值,因此它将简单地拉伸以填充第二行中剩下的所有空格。

看演示提琴(从你的修改) 。

如果你看小提琴,我已经修改了最后一个项目有一个新的尺寸声明:

 .size3 { flex: 0 1 300px; } 

你会意识到,元素措施300像素的预期。 但是,当您调整flex-grow属性使其值超过0( 请参阅示例 )时,它将伸展以填充行,这是预期的行为。 由于在新的行上下文中没有兄弟可以比较,所以1到无穷大的整数不会影响它的大小。

因此, flex-grow可以被看作是这样的:

  • 0 :(默认值) 不要拉伸 。 大小可以是元素的内容宽度,也可以遵循flex-basis
  • 1拉伸
  • ≥2 (整数n ): 拉伸 。 例如,在同一行上将是flex-grow: 1其他元素大小的nflex-grow: 1