将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;
}
您将意识到该元素按预期测量300px。但是，当您调整flex-grow属性使其值超过0（see example）时，它将拉伸以填充该行，这是预期的行为。因为在它的新行上下文中它没有可比较的兄弟，所以1到无穷大之间的整数不会影响它的大小。
因此，flex-grow可以被视为：
0 :(默认值）不要伸展。大小到元素的内容宽度，或服从flex-basis。1：拉伸。≥2（整数n）：拉伸。例如，将是同一行中flex-grow: 1的其他元素的n倍。好文章https://gedd.ski/post/the-difference-between-width-and-flex-basis/
flex-basis是：flex项目放入Flex容器之前的大小。这是物品的理想或假设尺寸。但是flex-basis不是保证大小！一旦浏览器将项目放入其Flex容器中，事情就会发生变化。通常，在将所有项目的弹性基础值相加之后，弹性容器将没有足够的空间，或者将具有额外的空间。