Flex-box - 如何填充＆＃34;整个＆＃34;空间保留项目比例？

Question

代码优先：http://codepen.io/anon/pen/sGwgf

HTML：

<container>
  <item>first</item>
  <item>second</item>
  <item>third</item>
</container>

CSS：

container{
  display: flex;  
  flex-flow: row wrap;
}

item{
  flex: 1; //so each item should be the same size, am I right?
  min-width: 200px;
}

现在看看不同的容器尺寸：
1：

2：

如何强制第三项与前两项相同？ 我可以通过使用flexbox来实现吗？

3：

Answer 1

如果您希望这些商品位于＃2的同一行，则需要更新flex-wrap值：

 -webkit-flex-flow: no-wrap;

如果您希望布局＃3继续在某些分辨率下生效，您应该只使用媒体查询：

 @media all and (max-width: 500px) {
  container{
    -webkit-flex-flow: wrap;
   }
  }

注意：container不是HTML5元素，您应该确保您的标记有效：http://validator.w3.org/