如何用纯CSS实现Flexbox容器三列布局（不可修改HTML）

因为你需要的是二维列布局，Flexbox作为一维布局方案实现起来会比较绕，改用Grid布局可以更直接地满足需求，而且完全不需要修改HTML结构。

核心思路 #

1. 将原Flex容器的display改为grid，定义三列等宽布局
2. 指定前两个子项分别占据第1、第2列
3. 让第3个及以后的所有子项都自动归入第3列，它们会在列内垂直堆叠

完整代码示例 #

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 class="item">项目5</div>
  <!-- 可选：项目6 -->
</div>

CSS代码

.container {
  /* 替换原flex布局为grid */
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
  gap: 16px; /* 列/行间距，可根据需求调整 */
  min-height: 300px; /* 可选：设置容器最小高度，避免内容过短 */
}

/* 第一个项目占第1列 */
.container > .item:nth-child(1) {
  grid-column: 1;
}

/* 第二个项目占第2列 */
.container > .item:nth-child(2) {
  grid-column: 2;
}

/* 第3个及以后的项目全部归入第3列 */
.container > .item:nth-child(n+3) {
  grid-column: 3;
}

如果坚持要用Flexbox实现（不推荐） #

如果必须保留display: flex，可以通过以下技巧实现，但稳定性不如Grid：

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px; /* 必须固定高度，否则布局会混乱 */
  gap: 16px;
}

.container > .item:nth-child(1),
.container > .item:nth-child(2) {
  flex: 0 0 calc(33.333% - 8px); /* 减去一半gap的宽度 */
  height: 100%;
}

.container > .item:nth-child(n+3) {
  flex: 0 0 calc(33.333% - 8px);
  margin-top: -100%; /* 通过负margin拉到第三列位置 */
  margin-left: calc(66.666% + 8px); /* 定位到第三列起始位置 */
}

这种方法依赖固定容器高度，当第三列子项数量变化时需要调整高度，灵活性差，所以更推荐Grid方案。

内容的提问来源于stack exchange，提问作者Faye D.