Question

严格使用flexbox可能无法做到这一点，或者可能需要某些媒体查询。我很好。我想知道是否有一种方法可以将四个项目水平地排成一行，然后将它们分别切换为两列和两个项目。

我已经尝试了多种方法来做到这一点，例如：

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

Example codepen

这行得通，但是如果您减小屏幕宽度，它将在第一行中包装为三项，在第二行中包装为一项，直到将宽度减小到小于三项的宽度为止。如果屏幕宽度太小而无法将所有四个项目水平排列，我希望它是两列两行的项目。

我可以控制行中每个项目的宽度，但它们的大小会像按钮一样小（最大200像素）。

这可能与flexbox有关吗？如果没有，是否有更好的替代方法来包装到适当的网格？

Answer 1

一个没有媒体查询的想法是对按钮使用额外的包装，如下所示：

.flex-container,
.flex-container > div{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

button {
  width: 250px;
}

<div class="flex-container">
  <div>
    <button>a</button>
    <button>b</button>
  </div>
  <div>
    <button>c</button>
    <button>d</button>
  </div>
</div>

Answer 2

如果每个按钮的宽度保持不变，则可以简单地将容器的max-width设置为该宽度，乘以每行所需按钮的（最大）数量。

请参阅此codepen。

必要时将项目弯曲到两行

2 个答案: