如何使用Flexbox实现弹性容器子元素等间距，解决最后一列外边距问题

针对最后一列右侧多余外边距的问题，下面给出两种成熟的实现方案：

方案1：使用Flex原生gap属性（首选，兼容性好） #

gap是Flexbox规范内置的间距属性，只会在flex子项之间生成间距，自动忽略容器最外侧的多余间距，是目前最简单的实现方案：

.flex_container{ 
  display:flex; 
  border:1px solid red; 
  width:100%; 
  gap: 20px; /* 直接设置子项横向间距，不需要额外处理最后一列 */
} 
.flex_container div{ 
  flex: 1; /* 代替width:100%，让所有列等分容器宽度 */
  border:1px solid blue; 
  background:yellow; 
  height:400px; 
}

HTML代码和原有写法完全一致即可：

<div class="flex_container"> 
  <div>col 1</div> 
  <div>col 2</div> 
  <div>col 3</div> 
  <div>col 4</div> 
</div>

这个方案目前支持所有现代浏览器（Chrome >= 84，Firefox >= 63，Safari >= 14.1），覆盖95%以上的全球用户。

方案2：兼容旧浏览器的伪类处理方案 #

如果需要兼容IE11等不支持gap的旧浏览器，可以用:last-child伪类清除最后一列的多余右外边距：

.flex_container{ 
  display:flex; 
  border:1px solid red; 
  width:100%; 
} 
.flex_container div{ 
  flex: 1; 
  border:1px solid blue; 
  margin-right: 20px; 
  background:yellow; 
  height:400px; 
}
/* 清除最后一列的右外边距 */
.flex_container div:last-child {
  margin-right: 0;
}

注意：原有代码中子项设置width:100%是错误写法，会导致每列都尝试占满整个容器宽度，最终布局溢出。替换为flex:1即可让所有列自动等分扣除间距后的容器剩余宽度，实现等分布局。

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