align-content没反应最常见原因是容器未换行或交叉轴无剩余空间；它仅在flex-wrap: wrap且容器交叉轴高度大于多行总高时生效，控制的是行与行之间的分布而非行间距。
align-content 为什么没反应
最常见的情况是：容器根本没换行，或者换行了但交叉轴没剩余空间。align-content 只在满足两个硬性条件时才起效：display: flex + flex-wrap: wrap，且子项实际折成多行（不是靠height硬撑出来的“假多行”），同时容器在交叉轴方向（垂直方向）有明确高度约束，且该高度大于所有行内容总高。
容易踩的坑：
- 忘了给容器设
height或max-height，导致容器高度由内容撑开，align-content无空间可分配 - 子项宽度太小、数量太少，一行就排完了，
flex-wrap根本没触发换行 - 用了
align-items: stretch（默认值），把每行都拉伸填满，掩盖了行间空隙，看起来像“没生效”
align-content 和 row-gap 的区别必须分清
align-content 不是“设置行间距”的快捷方式，它控制的是**多行整体在交叉轴上的分布逻辑**；而row-gap 才是真正在行与行之间插入固定像素空白。
关键差异：
-
align-content: space-between→ 第一行顶边、最后一行底边贴容器边缘，中间行等距拉开 —— 行间距不固定，取决于容器剩余高度 -
row-gap: 16px→ 每两行之间严格留出 16px 空白，和容器高度无关 -
align-content在 IE11 中对space-evenly完全不识别，会退化为stretch；row-gap在 IE 中则完全不支持 - 两者可以共存，但目标不同：
row-gap解决“空多少”，align-content解决“怎么摆”
哪些 align-content 值真正适合控“行间距”
如果目标是让行与行之间视觉上更疏朗，优先选space-around或space-evenly，而不是center或flex-start——后两者只是位移，不增加空隙密度。
实操建议：
-
align-content: space-around：每行上下各占一半间距，首尾行到容器边缘的距离 = 行间距离的一半，兼容性好（Safari 10.1+ 起支持） -
align-content: space-evenly：所有相邻边缘（容器顶/底 + 行间）间距完全相等，效果最均匀，但 Safari ≤14.1 存在渲染抖动，线上项目建议降级为space-around - 避免用
stretch（默认值）来“假装有间距”，它会让每行高度被拉伸，破坏卡片等高一致性
调试无效时的三步检查法
别改来改去，先确认基础是否成立：
- 打开开发者工具，检查容器 computed styles 中的
flex-wrap是否为wrap，且flex-direction是row（此时交叉轴才是垂直方向） - 看容器的
height和content height是否不同 —— 如果相等，说明没剩余空间，align-content天然失效 - 临时加个
outline: 1px solid red到子项上，确认是否真有多行渲染（有时字体加载延迟或图片未加载会导致换行位置跳变）
真正容易被忽略的点是：你调的不是“行间距”，而是“行块在容器里的落点”。如果需要精确控制像素级空隙，row-gap 或 margin 模拟才是正解，align-content 只负责分配那块“剩下的空白”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
