如何使Flex Box的CSS间距均匀？需适配视口多列布局（弃用CSS Grid）

核心思路 #

不用CSS Grid的前提下，要实现随视口宽度自动适配的多列布局，关键是让Flex子元素自动换行，同时通过统一的间距控制和最后一行对齐处理，解决间距不均的问题。

具体解决方案 #

1. 用gap替代margin控制间距 #

放弃给子元素设置左右margin，直接给Flex容器添加gap属性，统一控制列与列、行与行之间的间距，避免外边距折叠导致的边缘间距不一致问题。

示例CSS：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* 统一列、行间距 */
  padding: 0 16px; /* 可选：给容器加左右内边距，避免边缘元素贴紧屏幕 */
}

.flex-item {
  flex: 1 1 280px; /* 最小宽度280px，视口足够宽时自动扩展列数 */
  /* 不要设置margin-left/right */
}

2. 修复最后一行元素对齐问题 #

如果使用justify-content: space-between，最后一行元素数量不足时会出现过度分散的情况，可通过伪元素填充的方式解决：
给Flex容器添加伪元素，让它占据最后一行的剩余空间，强制最后一行元素与前面的列宽保持一致：

.flex-container::after {
  content: "";
  flex: 1 1 280px; /* 与子元素的flex属性参数保持一致 */
}

3. 用calc精确控制子元素宽度（可选） #

如果不想依赖flex-grow，可以通过calc计算子元素宽度，配合媒体查询手动切换列数：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0 16px;
}

.flex-item {
  width: calc((100% - 16px) / 2); /* 两列布局：总宽度减去1个gap，再平分 */
}

/* 适配平板横屏及以上视口 */
@media (min-width: 768px) {
  .flex-item {
    width: calc((100% - 32px) / 3); /* 三列布局：总宽度减去2个gap，再平分 */
  }
}

4. 避免错误的justify-content设置 #

不要随意使用justify-content: space-between或space-around，要实现元素左对齐且间距均匀，用gap+flex-grow组合即可，或者搭配justify-content: flex-start，确保所有元素间距一致，最后一行不会散开。

完整示例代码 #

<div class="flex-container">
  <div class="flex-item">内容1</div>
  <div class="flex-item">内容2</div>
  <div class="flex-item">内容3</div>
  <div class="flex-item">内容4</div>
  <div class="flex-item">内容5</div>
</div>

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.flex-item {
  flex: 1 1 280px;
  background: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
}

/* 处理最后一行对齐 */
.flex-container::after {
  content: "";
  flex: 1 1 280px;
}

以上方案可实现视口宽度变化时自动调整列数，同时保证所有元素间距均匀，最后一行不会出现错位或间距过大的问题。

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