行间距“过大”实为align-content: stretch拉伸整行所致，它将容器交叉轴剩余高度均分给各行，使子项纵向撑开；真正控制像素级行间距应使用row-gap，且需满足display: flex、flex-wrap: wrap及实际换行等前提。
行间距“过大”基本不是真的加了空白，而是 align-content: stretch 在拉伸整行——它把容器交叉轴剩余高度均分给每一行，子项被纵向撑开。真正该用的是 row-gap。
为什么 align-content 会让行看起来空一大截
当容器有固定高度（比如 height: 400px），而子项总高只有 120px 时，align-content: stretch（默认值）会强制每行都拉高到填满剩余空间。结果是：行本身变高，子项被撑开，上下留白是“被拉出来的”，不是插进去的。
常见误判点：
- DevTools 里看到容器
height远大于content height→ stretch 正在生效 - 某行里有未设
height的图片 → 该行基线偏移，拉伸后更显错位 -
align-items: stretch（父级默认）会加剧子项纵向撑开
row-gap 才是控制像素级行间距的正确属性
row-gap 在行与行之间插入固定空白，不依赖容器高度，也不拉伸子项。但它不是写了就生效，必须满足硬性前提：
- 父容器必须同时声明
display: flex和flex-wrap: wrap（漏任一，row-gap直接被忽略） - 不能只写
gap: 12px，优先拆开写row-gap: 12px；移动端某些 WebView 对简写解析不稳定 -
row-gap单位必须是绝对或相对长度（如px、rem），row-gap: 5%会被静默忽略 - 别混用
margin-bottom和row-gap，否则实际间距 = 两者相加
为什么 row-gap 没效果？先检查这三件事
很多“不生效”其实是配置没到位：
- Computed Styles 里确认
flex-wrap真是wrap，不是被后续规则覆盖成nowrap - 容器交叉轴（垂直方向）有没有明确高度？
height: auto或min-height不足以触发row-gap生效 - 子项是否真换行？还是靠
flex-basis硬卡出来的“假多行”？打开 DevTools 看 DOM 顺序和视觉位置是否一致
另外，HTML 中子项间的换行符、空格会被解析为文本节点，产生约 3–4px 间隙——这不是 row-gap 的问题，删掉源码换行或在父容器上加 font-size: 0 可压制。
兼容旧浏览器时怎么兜底
IE 全系、Safari ≤13.1 完全不支持 row-gap，但硬套 @supports (gap: 1px) 不可靠（Safari 14.1 才开始支持，14–15.4 还有渲染抖动）：
- 降级检测应改用
@supports (row-gap: 1px) - 伪元素方案要配负 margin：
.container { margin: -6px; }+.item { padding: 6px; }（模拟row-gap: 12px） - IE10–11 必须用负边距法：
.container { margin-right: -12px; }+.item { margin-right: 12px; }，且所有子项需显式设flex-basis（如flex: 0 0 calc(50% - 12px)）
真正难处理的从来不是怎么加间隙，而是让浏览器相信“这一行结束了”。调试时最容易忽略的，是子项高度不一致导致的基线错位——这时统一 min-height 或用 aspect-ratio 约束图片，比硬调 align-content 更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
