如何在CSS中为含flex-grow元素的flexbox设置1px固定间距

这个需求其实用Flexbox的gap属性就能完美解决，不用复杂的margin技巧，而且能轻松处理数量不固定的小元素和自适应填充的蓝色元素。

核心思路 #

1. 给Flex容器设置gap: 1px，这会自动在所有子元素之间添加精确的1px间距，完全不用担心边缘元素多出间距的问题。
2. 让蓝色元素拥有flex-grow: 1属性，它就会自动填充容器中除了小元素之外的所有剩余空间。
3. 小元素保持自身尺寸即可，不需要额外的flex属性设置。

代码示例 #

<div class="flex-container">
  <!-- 数量不固定的前置小元素 -->
  <div class="small-item"></div>
  <div class="small-item"></div>
  <div class="small-item"></div>
  
  <!-- 自适应填充的蓝色元素 -->
  <div class="blue-item"></div>
  
  <!-- 数量不固定的后置小元素 -->
  <div class="small-item"></div>
  <div class="small-item"></div>
</div>

.flex-container {
  display: flex;
  gap: 1px; /* 关键：所有元素之间的固定1px间距 */
  width: 100%; /* 按需设置容器宽度 */
  height: 60px; /* 按需设置容器高度 */
}

.small-item {
  width: 50px; /* 小元素的固定宽度 */
  background-color: #ccc;
}

.blue-item {
  flex-grow: 1; /* 自动填充剩余空间 */
  background-color: #1e90ff;
}

为什么这个方案可行？ #

• gap是Flexbox原生支持的间距属性，它只会在元素之间添加间距，不会给容器的边缘额外加间距，完美解决了用margin时最后一个元素多出间距的痛点。
• 不管前置/后置小元素的数量怎么变，蓝色元素都会自动调整宽度填充剩余空间，同时保持所有元素之间的1px间距不变。

兼容旧浏览器的替代方案（如果需要） #

如果需要兼容不支持gap的旧浏览器（比如IE11），可以用负margin的技巧：

.flex-container {
  display: flex;
  width: 100%;
  height: 60px;
  margin: -0.5px; /* 抵消子元素margin带来的整体偏移 */
}

.small-item {
  width: 50px;
  background-color: #ccc;
  margin: 0.5px; /* 每个元素0.5px margin，相邻元素间距就是1px */
}

.blue-item {
  flex-grow: 1;
  background-color: #1e90ff;
  margin: 0.5px;
}

这个方案通过给容器设置负的0.5px margin，抵消子元素0.5px margin带来的容器整体尺寸偏移，从而实现元素之间1px的间距效果，不过可读性和简洁性不如gap方案。

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