CSS - display flex 弹性布局实现一行仅显示 2 个，每行显示指定个数（设置 space-between / space-around 超出自动换行）详细示例代码

要使用CSS的display: flex实现一行仅显示两个元素，并且每行显示指定数量的元素，你可以使用flex布局的flex-wrap属性来允许元素在必要时换行，并使用flex-basis或width属性来指定每个元素的基础大小。

以下是一个简单的例子，展示了如何实现这一布局：

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <!-- ... 更多元素 -->
</div>

CSS:

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 可选，元素之间的间隔 */
}
 
.item {
  flex: 0 0 50%; /* 每行显示两个元素 */
  box-sizing: border-box; /* 防止padding导致宽度超出 */
  padding: 10px;
  background-color: #f0f0f0;
  text-align: center;
}

在这个例子中，.item类使用flex: 0 0 50%，这意味着flex项目不会增长或收缩，并且它们的基础大小是父容器宽度的50%。这样每行就能放置两个.item元素。通过调整.item的flex-basis或width属性，你可以控制每行显示的元素数量。例如，如果你想每行显示四个元素，可以将.item的flex-basis设置为25%。