Flex-box - 如何填充“整个”空间保留项目比例？

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/