align-content 用于分配交叉轴剩余空间而非解决巨大间距；其默认值 stretch 会拉伸各行填满容器高度，导致行高异常增大，视觉上误以为“间距爆炸”。
align-content 不是用来“解决巨大间距”的，而是用来分配交叉轴上**剩余空间**的。如果你看到多行 Flex 容器里行与行之间空得离谱，大概率不是它加了间距，而是它在拉伸——尤其是默认值 stretch 在作祟。
为什么 align-content: stretch 会让行看起来“间距巨大”
当容器设置了固定高度（比如 height: 400px），且子项总高度远小于该值时，align-content: stretch（默认）会把每一行都拉高，填满整个交叉轴空间。结果就是：行本身变高了，子项被撑开，视觉上像“行间距爆炸”。这不是加了 margin，是整行被纵向拉伸了。
- 检查 computed height：打开 DevTools → Elements → Computed，对比
height和content height。如果前者远大于后者，align-content: stretch就在生效 - 子项若设了
align-self: stretch或没设align-items（继承父级stretch），也会加剧拉伸效果 - 一旦某行里有个子项高度不一致（比如图片没设
height），该行基线偏移，拉伸后更显错位，误以为是“间距不均”
align-content 什么情况下根本不会动
写了 align-content: space-between 却毫无反应？不是语法错，是它压根没机会执行。三个条件缺一不可：
- 容器必须有
display: flex且flex-wrap: wrap（或wrap-reverse） - 子项必须真实换行（即主轴总尺寸 > 容器主轴尺寸），仅靠
flex-basis不够，还得能收缩（flex-shrink: 1）或受min-width限制触发折行 - 容器在交叉轴方向要有明确且富余的尺寸——
min-height不够稳，height或max-height更可靠；如果容器高度由内容撑开（height: auto），就没有“剩余空间”可分
想精确控制像素级行间距？别碰 align-content
align-content 是按比例分剩余空间的，不是设固定值。真要 12px 行距，优先用 row-gap：
-
row-gap: 12px直接插入固定空白，和容器高度无关，也不拉伸子项 - 搭配
align-content: flex-start（关闭拉伸），能让row-gap效果清晰可见 - 若同时设了
row-gap和align-content: space-between，浏览器会把row-gap的空白也纳入“剩余空间”再分配，结果不可控 - IE 不支持
gap，此时需降级：子项设margin-bottom+ 父容器margin-bottom: -Xpx抵消，或用:not(:last-child)清除末尾边距
子项高度不一致时，align-content 会“失效”
Flex 把每行当一个整体块来对齐，但若第一行子项高 200px、第二行只有 80px，它们的基线不同。align-content: center 会让两行中点对齐，但视觉上像“错位”，不是间距问题，是行块锚点不统一。
- 临时解法：给所有子项加
align-self: flex-start或统一min-height，让每行“底部对齐”或“顶部对齐” - 长期建议：这种场景更适合
display: grid，行列间距正交可控，row-gap行为稳定，无需操心“剩余空间”逻辑 - 别试图用
align-content强行修正——它不是为异高行设计的
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
