如何用CSS/Flexbox实现数组元素两列等宽均匀分布布局？

我有一个元素数量不固定的数组（可能是3个或更多/更少），想要按下图的样式布局，需求如下：

• 每个「元素列（item lane）」宽度相等；
• 元素之间需「均匀分布（space around）」；
• 仅遍历一次元素数组。

目前尝试的代码：
HTML（框架模板语法）

<div class="parent">
  @for (item of items) {
    <div class="item">
      {{ item.name }}
    </div>
  }
</div>

CSS

.parent {
  display: flex;
  justify-content: space-around;
}

请问能否通过CSS或Flexbox设置每2个元素换行？还有其他实现方案吗？

1. Flexbox 实现（适配需求） #

可以通过 Flexbox 实现每2个元素换行，同时满足等宽和均匀分布的要求：

.parent {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  /* 可选：添加gap控制元素间距，避免单行时两端留白过大 */
  gap: 1rem;
}

.item {
  /* 固定宽度为48%，预留间距空间，保证每行最多2个元素 */
  flex: 0 0 48%;
  box-sizing: border-box; /* 防止内边距/边框撑宽元素 */
}

如果需要更严格的等宽，也可以用flex: 1 1 48%，但固定宽度能更稳定地控制每行2个元素的布局。

2. CSS Grid 实现（更简洁直观） #

Grid 布局是更适合这类固定列数需求的方案，代码更简洁，天然支持等宽列：

.parent {
  display: grid;
  /* 定义每行2列，每列宽度自动均分可用空间 */
  grid-template-columns: repeat(2, 1fr);
  /* 控制元素间的间距，替代space-around的作用 */
  gap: 1rem;
  /* 可选：让元素在单元格内居中 */
  justify-items: center;
}

这个方案完全满足你的三个需求，且不需要额外调整元素宽度，逻辑更清晰。

3. 伪类辅助换行（Flexbox 进阶技巧） #

如果一定要通过强制换行的方式实现，也可以结合 nth-child 伪类和 break-before 属性：

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.item {
  flex: 0 0 45%; /* 预留间距 */
}

/* 从第3个元素开始，每个元素前强制换行 */
.item:nth-child(2n + 1):not(:first-child) {
  break-before: always;
}

不过这个方案不如前两种简洁，一般更推荐前两种方案。

内容的提问来源于stack exchange，提问作者Slamdunk