使用calc()时Flexbox space-between末尾出现1px间隙问题求助

你遇到的这个1px间隙问题，本质是浏览器浮点精度计算的误差，和Flexbox本身的实现无关。当你用justify-content: space-between时，浏览器会把容器总宽度减去所有列的宽度总和，得到剩余空间，再平均分配到列与列之间。但如果容器宽度、列宽的计算涉及到无限循环的小数（比如1/12*100%这种比例），浏览器只能用近似值来渲染，当这些近似值的总和和容器宽度出现1px级别的偏差时，就会在最后一列的末尾留出一道缝隙——调整窗口大小刚好触发这个精度误差时，缝隙就会出现或消失。

哪怕你简化了calc()的写法，只要核心是基于比例的浮点计算，这个问题就可能重现。下面给你几个靠谱的解决方案：

方案1：用gap替代justify-content: space-between（推荐） #

这是现代CSS栅格最简洁的解决方式，gap属性直接控制flex容器内项目的间距，完全避免了手动计算剩余空间的精度问题：

修改你的.row样式：

.row { 
  display: flex; 
  flex-wrap: wrap; 
  max-width: 550px; 
  width: 100%; 
  margin: 0 auto; 
  border: 2px solid #888; 
  /* 去掉justify-content: space-between，改用gap设置列间距 */
  gap: 24px; /* 这里的数值对应你之前calc里的间距基准，可按需调整 */
}

然后简化列的flex-basis计算，比如：

.col-6 { flex-basis: calc(50% - 12px); } /* 50%减去一半的gap值，每列左右各占一半间隙 */
.col-4 { flex-basis: calc(100%/3 - 16px); } /* 1/3宽度减去2/3的gap值，3列共用2个间隙，每列分摊24px*2/3=16px */

这种方式不仅消除了精度问题，代码也更易维护。

方案2：用负margin+内边距模拟间隙 #

这是传统栅格的经典写法，通过容器的负margin抵消列的外边距，避免末尾间隙：

.row { 
  display: flex; 
  flex-wrap: wrap; 
  max-width: 550px; 
  width: 100%; 
  margin: 0 auto; 
  border: 2px solid #888; 
  /* 负margin抵消列的左右外边距 */
  margin-left: -12px;
  margin-right: -12px;
  padding: 0 12px; /* 可选，避免内容贴容器边缘 */
}
div[class^="col"] { 
  border: 2px solid red; 
  /* 列的左右外边距控制间距 */
  margin-left: 12px;
  margin-right: 12px;
}
.col-6 { flex-basis: calc(50% - 24px); } /* 减去左右外边距的总和 */

方案3：暴力隐藏间隙（快速临时解决） #

如果不想大改代码，可以给容器加个微小的溢出隐藏，把那1px的缝隙藏起来：

.row {
  /* 原有样式不变 */
  overflow: hidden;
  /* 或者用负margin */
  margin-right: -1px;
}

这个方法简单粗暴，但要注意可能会截断列的右侧边框（如果有的话），适合快速调试时用。

方案4：用flex-grow: 1填充间隙 #

给所有列添加flex-grow: 1，让列自动填充容器内的剩余空间，哪怕有精度误差也会被填满：

div[class^="col"] { 
  border: 2px solid red; 
  flex-grow: 1;
}

不过这个方法会让列的实际宽度比设定的flex-basis稍宽，如果你需要严格的宽度比例，可能不太适用。

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