弹性包装-以2件为一组包装物品

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% width @ 769px -每行1

谢谢,

里克

Answer 1

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

根据你的例子，你可以这样做:

.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%; }
}

我已经更新了你的笔。