如何在保持图片居中的同时减少Flex布局中灰色盒子间距？

嘿，我来帮你解决这个问题！要在保持图片居中的前提下缩小那些灰色盒子之间的间距，gap属性就是你要找的神器——它是Flex布局里专门用来控制项目间间距的，比用margin靠谱多了，完全不会影响内容居中的效果。

具体修改步骤： #

• 先给你的.layout容器加上gap属性，比如gap: 8px;（数值你可以自己调，想要多近就设多小）。
• 注意哦，你原来的.child用了flex: calc(100% / 3)，加了gap之后这个计算会让盒子溢出容器（因为没算上间距的宽度），所以得把flex属性调整一下，让盒子自动适配空间：把flex: calc(100% / 3)改成flex: 1 1 calc((100% - 2 * 8px) / 3);——这里的2是因为一行3个盒子有2个间距，8px就是你设的gap值，这样盒子就不会挤出去了。

改完后的完整代码： #

.layout {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* 这里设置你想要的盒子间距，数值越小越近 */
}

.child {
  min-height: 100px;
  width: 200px; /* 作为最小宽度，防止盒子太窄 */
  background: rgba(185, 180, 169, 0.226);
  flex: 1 1 calc((100% - 2 * 8px) / 3);
  text-align: center;
  line-height: 100px;
  border: 5px solid white;
  box-sizing: border-box; /* 建议加上，让border算在盒子宽度里，避免溢出 */
}

额外小提示： #

• 加上box-sizing: border-box能让你的border不会额外撑开盒子宽度，布局更稳。
• 如果是图片居中，建议给图片加个vertical-align: middle，避免line-height带来的一点点偏移：

.child img {
  vertical-align: middle;
}

这样改完，间距想调多大就调多大，图片的居中效果也一点不会受影响，完美解决你的问题！

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