align-content不控制像素级行间距，只分配交叉轴剩余空间；它仅在display: flex、flex-wrap: wrap且容器交叉轴高度固定时生效，而row-gap才真正控制固定行间距。
直接结论：这不是“计算错误”，而是你误把 align-content 当成了 row-gap —— 它根本不控制像素级行间距，只分配交叉轴剩余空间。
为什么 align-content 看起来像“失控”了
它只在三个硬性条件同时满足时才起效：display: flex + flex-wrap: wrap + 容器在交叉轴（垂直方向）有明确且富余的高度（如 height: 300px）。常见失效场景：
- 容器用
height: auto或没设高度，align-content直接不生效 - 子项没真正换行（总宽度 ≤ 容器宽度），
flex-wrap根本没触发 - 子项高度不一致，导致每行“行块”的基线错位，
align-content: space-between看起来歪斜、浮动 - 用了默认的
align-items: stretch，把每行都拉高填满容器，掩盖了行间空隙
row-gap 不生效？先确认浏览器和写法是否匹配
现代浏览器（Chrome 84+、Firefox 63+、Safari 14.1+）支持 row-gap 在 flex-wrap: wrap 容器中生效，但必须：
- 父容器同时声明
display: flex和flex-wrap: wrap（缺一不可） - 清除子项所有
margin，否则margin-bottom和row-gap叠加，间距翻倍 - 避免用
gap: 12px简写——它在响应式中易混淆顺序；优先分开写row-gap: 12px和column-gap: 8px - 单位必须是
px、rem、em；row-gap: 5%会被浏览器直接忽略
兼容 IE 或旧版 Safari？别硬扛 row-gap
IE 完全不支持 gap 系列属性；Safari ≤13.1 也不支持；Safari 14–15.4 存在渲染抖动或塌陷 bug。降级方案要精准：
- 用
@supports (row-gap: 1px)做特性检测，再加载 fallback 样式 - 手动模拟时，**不能只靠
margin-right+:nth-child(4n)**——DOM 顺序 ≠ 视觉行末，响应式列数变化后立即失效 - 更稳的兜底是伪元素 + 负 margin：
.container { margin: -6px; }+.item { padding: 6px; }（模拟gap: 12px） - 若项目允许，直接切到
display: grid：它对gap的支持更早、更稳定，且天然按行列分离计算
最容易被忽略的一点
调试前先问自己三个问题：flex-wrap 真的触发了吗？容器交叉轴高度是不是 auto？你到底想控制的是“行块位置”（align-content）还是“两行之间固定多少像素”（row-gap）？混用二者会让布局行为变得极难预测——尤其当子项高度不一致时，align-content 的“行块”概念会彻底失焦。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
