如何在justify-content:center的Flex布局中实现精确像素级间距？

问题出在你给.box设置了flex:1，这会让同一行的Flex元素自动分配容器剩余空间、拉伸自身宽度。当容器宽度无法被「(box最小宽度 + gap) × 列数」整除时，元素宽度会产生小数像素，浏览器渲染时的四舍五入处理会让视觉上的间距出现细微偏差；同时justify-content:center将每行剩余空间分配在两侧，也容易造成间距变化的误判。

下面是几种解决方法：

方案1：移除.box的flex:1，固定元素宽度/最小宽度 #

移除flex:1后，元素不会被拉伸，gap:24px会严格保持元素间的间距，同时justify-content:center让每行元素居中对齐：

.container {
  position: relative;
}

.grid {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.box {
  height: 100px;
  min-width: 140px; /* 保持最小宽度，也可改为width:140px固定宽度 */
  background: #00ff00;
}

方案2：改用Grid布局（推荐） #

Grid布局的gap在响应式场景下表现更稳定，结合auto-fit和minmax可以实现自动换行且间距始终固定：

.container {
  position: relative;
}

.grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, auto));
  justify-content: center;
  gap: 24px;
}

.box {
  height: 100px;
  background: #00ff00;
}

这里minmax(140px, auto)确保元素最小宽度为140px，不会自动拉伸，彻底避免间距偏差。

方案3：保留flex:1但限制元素宽度 #

如果需要元素保持一定的拉伸能力，可给.box设置max-width，避免宽度出现过多小数像素：

.box {
  flex: 1;
  height: 100px;
  min-width: 140px;
  max-width: 200px; /* 根据需求调整最大宽度 */
  background: #00ff00;
}

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