Question

对熟悉Flexbox的人有一个快速的问题。

我有一排4个弹性项目。我希望在第一个断点（max-width:1024px）处将它包装成2列的2列。我想我可以使用％内部每个项目的宽度来实现这一点。 flex容器，但似乎不起作用。

代码在这里：

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

我想我可以通过在2 <div>秒内包装flex项目2来实现这一目标。然而，这只会创建更多与布局相关的工作并使页面对称。

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

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

谢谢，

里克多维

Answer 1

要实现这一点，您需要包装Flex容器并设置flex-grow＆amp; amp;当儿童的内容物不适合所需的空间（即25％）时，为了防止弹性物品（显然）拉伸或收缩，可以使儿童收缩至0％。然后，您可以为每个断点正常设置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%; }
}

我已更新了您的笔here。

Flexbox - 以2件为单位包装物品

1 个答案: