Flexbox - 以 2 个为一组包装项目

Question

对熟悉 Flexbox 的人有一个简短的问题。

我有一排 4 个弹性项目。我希望在第一个断点 ( max-width:1024px) 处将它们包装成 2 列，每列 2 列。我以为我可以使用 flex 容器内每个项目的宽度上的 % 值来实现这一点，但事实并非如此似乎工作。

代码在这里：

http://codepen.io/reskk/pen/rrpdVm

我想我可以通过在 2 内一次包装弹性项目 2 来实现这一点 <div>秒。然而，这只会在布局和使页面对称方面产生更多的工作。

有没有办法只使用宽度百分比或类似的东西来做到这一点？

例如：
25% 基线宽度 - 每行 4
50% 宽度 @ 1024px - 每行 2
100% 宽度 @ 769px - 每行 1

谢谢，

里克

Answer 1

为了实现这一点，您需要包装您的 flex 容器并将 flex-grow & shrink 设置为 0% 以防止您的 flex 项目（显然）在其内容不适合所需空间时拉伸或收缩（即25%）。然后，您可以为每个断点正常设置 flex-basis。

根据您的示例，您可以执行以下操作：

.whatflex {
  display: flex;
  flex-wrap: wrap;
}

.con {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100%;
}

@media only screen and (min-width: 769px){
  .con{ flex-basis: 50%; }
}

@media only screen and (min-width: 1024px){
  .con{ flex-basis: 25%; }
}

我已经在这里更新了你的笔。