Flex元素内子项能否实现横竖均匀间距？align-content失效怎么办？

嘿，这个问题我之前折腾过好一会儿！咱们先搞清楚为什么你用align-content: space-around没效果，再给你几个靠谱的解决方案～

为什么align-content没达到预期？ #

align-content确实是控制Flex容器多行之间的垂直间距，但它生效有两个前提：

1. 容器必须是多行Flex（也就是flex-wrap: wrap且子项总宽度超过容器宽度）；
2. 容器需要有明确的高度（或者说，容器高度大于所有子项行高的总和）。

如果你的子项高度不一致，或者容器高度刚好贴合子项，那align-content就没法分配额外空间，自然看不到垂直间距的变化。而且它只能控制行与行的间距，没法让子项之间的水平、垂直间距完全一致。

最优解决方案：用gap属性 #

这是目前最省心的方式，Flex和Grid都支持gap，它专门用来控制子项之间的间距，不会有外边距折叠的问题，直接设置就能让横竖间距统一：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 保持你原来的水平两端对齐 */
  gap: 20px; /* 这里设置你想要的统一间距数值 */
}

处理最后一行对齐问题 #

如果最后一行的子项数量不够，导致右侧留白太多，你可以给容器加个伪元素来填充空白：

.container::after {
  content: "";
  flex: 0 0 200px; /* 这里的宽度设置成和你的子项宽度一致 */
}

这样最后一行的子项就会和上面的对齐啦～

兼容旧浏览器的替代方案：Margin + Calc #

如果需要兼容IE这类不支持gap的浏览器，可以用外边距来模拟：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: -10px; /* 抵消子项的外边距，避免容器外多出间距 */
}

.item {
  margin: 10px; /* 子项的内外间距，最终子项之间的间距是20px */
  box-sizing: border-box; /* 确保padding和margin不会撑开子项尺寸 */
}

更灵活的终极替代方案：Grid布局 #

如果你的布局本来就是二维的（需要同时控制横竖间距），Grid布局天生更适合，代码更简洁：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自动适配列数，子项最小宽度200px */
  gap: 20px; /* 统一的横竖间距 */
}

Grid会自动帮你处理所有间距和对齐问题，甚至不需要操心最后一行的对齐，非常省心！

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