三列flex布局如何调整space-between避免最后一行两个元素分散对齐

你遇到的问题是justify-content: space-between的默认规则导致的：它会自动在当前行所有子元素之间均匀分配剩余空间，最后一行元素数量不足时就会出现两端分散的情况，下面是两种常用的可行解决方案：

方案1：添加空白占位元素（兼容性最好） #

无需修改原有CSS，仅需在容器末尾添加1~2个和.item同宽、高度为0的不可见占位元素即可，三列布局最多只需补2个占位元素就能覆盖所有最后一行缺元素的场景：

<div id="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <!-- 新增占位元素 -->
  <div class="item item-placeholder"></div>
</div>

新增CSS规则：

.item-placeholder {
  height: 0;
  margin-top: 0;
  visibility: hidden;
}

原理是space-between会把占位元素也算成当前行的子项，最后一行相当于有3个元素，第三个不可见，前两个自然会和前几行的对齐规则保持一致。

方案2：用gap控制间距（无需额外DOM） #

如果不想添加多余的DOM元素，可以调整对齐规则，放弃space-between改用flex-start配合gap控制间距，也能达到相同的等距三列效果，且最后一行元素会自动左对齐：
修改后的CSS如下：

#wrap {
  width: 500px;
  display:flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /* 横向间距设为2%，3个元素加2个间距总宽度刚好填满容器 */
  column-gap: 2%;
}

.item {
  background: red;
  width: 32%;
  height: 20px;
  margin-top:9px;
}

该方案兼容性良好，所有现代浏览器均支持flex布局的gap属性。

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