使弹性项目一次包装两个答案

【问题标题】：Make flex items wrap two at a time使弹性项目一次包装两个
【发布时间】：2016-07-01 12:42:45
【问题描述】：

我现在拥有的是当窗口重新调整大小时，框会相应地调整以适应宽度。但是，我想要的是至少有两个框移动到下一行，而不是顶部的 3 和 1。

这可以通过 flexbox 实现吗？如果不能，我将如何实现？

小提琴：https://jsfiddle.net/jzhang172/cqdwLyxu/

.line{
  display:flex;
  width:100%;
  margin-bottom:30px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  
}
body,html{
  margin:0;
  padding:0;
  position:relative;
}
*{
  box-sizing:border-box;
}
.box{
  width:200px;
  min-width:200px;
  background:blue;
  margin:0 10px 0 10px;
  height:200px;
}

<div class="line">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="line">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

【问题讨论】：

仅使用 flexbox？不...不是...但是任何其他布局方法也不可能。需要媒体查询。

标签： javascript html css flexbox

【解决方案1】：

您可以使用媒体查询将 flex-basis 更改为 50% 换行，强制每行两个项目。

将此添加到您的 CSS：

@media ( max-width: 800px ) {
    .box {
           flex-basis: calc(50% - 20px);
           margin: 10px; 
         }
}

Revised Demo

【讨论】：

谢谢，这帮助我找到了另一种方法，但它与 flexbox 无关...... flex-basis calc 有什么作用？对我来说，小提琴在重新调整大小时确实会变成两两，但在此之前它仍然是 3-1，最后对我来说。
flex-basis 设置弹性项目的初始长度。在这种情况下，它将是宽度。
calc 使值成为计算。这里的意思是：使flex-basis 的宽度为 50% 减去左右边距大小。（否则总宽度会超过 100%）。
您可以调整max-width: 800px，使 2x2 断点出现在更宽或更窄的屏幕尺寸上。它仍在为您做 3-1，因为包装是在媒体查询执行之前发生的。所以试试max-width: 1200px。 jsfiddle.net/cqdwLyxu/2
cmets的第二个demo比Revised Demo好，有一个缺陷，它短暂显示3列。