设置max-width或width到flex项目而不是flex-basis之间有区别吗？
它是flex-grow / shrink属性的“断点”吗？
当我设置flex-wrap：wrap如何浏览器决定在哪一点将项目移动到新行？是根据他们的宽度还是“灵活基础”？
示例：http://jsfiddle.net/wP5UP/
最后两个框具有相同的flex-basis：200px，但是当窗口在300px和400px之间时，其中只有一个向下移动。为什么？
解决方法
flex-basis允许您在计算任何其他值之前指定元素的初始/初始大小。它可以是一个百分比或绝对值。
然而，它不是挠曲 – 生长/收缩性质的断裂点。浏览器基于元素的初始大小是否超过交叉轴的宽度(在常规意义上，即宽度)来确定何时包裹该元素。
基于你的小提琴，最后一个向下移动窗口的原因是因为父级的宽度已经被前面的兄弟姐妹完全占据 – 当你允许内容包装时，第一行中不能容纳的元素获取推送到后续行。由于flex-grow是一个非零值，它将简单地拉伸以填充第二行中剩下的所有空格。
See demo fiddle (modified from yours)。
如果你看看小提琴，我已经修改最后一个项目有一个新的大小声明：
.size3 {
flex: 0 1 300px;
}
你会意识到，元素测量300像素的意图。但是，当您调整flex-grow属性以使其值超过0(see example)时，它将伸展以填充行，这是预期的行为。因为在其新行上下文中没有要比较的兄弟姐妹，1到无穷大之间的整数不会影响它的大小。
因此，flex-grow可以看出：
> 0：不拉伸。大小到元素的内容宽度，或者遵循flex-basis。> 1：(默认值)。伸展。将与同一行上的所有其他flex项目具有相同的大小，因为它们的默认值为1。>≥2(整数n)：拉伸。在同一行上使用flex-grow：1时，其他元素的大小将为n倍。
