row-gap在flex-wrap容器中生效需满足display: flex和flex-wrap: wrap，且受align-items拉伸、子项margin及Safari旧版bug影响；align-content不能替代row-gap，二者功能不同。
flex-wrap换行后row-gap不生效？先确认浏览器支持和写法是否正确
现代浏览器（Chrome 84+、Firefox 63+、Safari 14.1+）已原生支持 row-gap 在 flex-wrap: wrap 容器中控制行间距，但必须同时满足两个条件：display: flex 和 flex-wrap: wrap。只写 gap: 12px 不够——如果子项高度不一致或容器设置了 align-items: stretch（默认值），视觉上会误以为“行距没起作用”，其实是交叉轴对齐拉伸干扰了间距感知。
-
row-gap只作用于行与行之间，不影响第一行顶部或最后一行底部；若发现整体上浮/下沉，大概率是容器padding-top或首/末子项的margin-top/margin-bottom在作祟 - 不要混用
margin和gap：子项显式写了margin-bottom: 8px，再加row-gap: 12px，实际垂直间距就是 20px，且末行底部还会多出 8px - Safari ≤15.4 存在渲染 Bug：启用
gap后可能出现行高塌陷、换行错位，此时需用@supports (row-gap: 1px)做特性检测并降级
align-content: flex-start 是什么，它能替代 row-gap 吗
align-content 控制的是**多行 flex 容器中各行整体在交叉轴上的分布方式**，不是行间距本身。比如 align-content: space-between 会让第一行顶边贴容器顶、最后一行底边贴容器底，中间行等距分配——这看起来像“调大了行距”，但本质是重排了行块位置，而非插入空白。
-
align-content: flex-start只是让所有行挤在顶部，不能设定固定像素距离；它解决的是“换行后整体上浮”的错觉，不是“行与行之间空多少” - 当容器高度固定且子项总高度小于容器时，
align-content才有可见效果；若容器高度由内容撑开，该属性完全不生效 - 它和
row-gap不冲突，但功能完全不同：row-gap插入确定尺寸的空白，align-content调整行块布局位置
row-gap 与 gap 简写怎么选，单位和兼容性要注意什么
推荐优先使用分开声明的 row-gap 和 column-gap，而不是 gap: 12px 16px。前者语义清晰、调试直观，后者在响应式场景下容易混淆顺序（gap: ，不是主轴/交叉轴）。
-
row-gap和column-gap必须用绝对单位（px、rem、em），不支持%；写成row-gap: 5%会被浏览器直接忽略 - IE 完全不支持
gap系列属性，旧版 Safari（≤13.1）也不支持；降级方案不能只靠margin，得配合负 margin 抵消或伪元素分隔 - 若项目需兼容 Safari 14–15.4，必须加运行时检测：
@supports (row-gap: 1px) and (not (-webkit-appearance: none))——后者可排除部分已知 Bug 版本
为什么改用 row-gap 后，最后一行还是往下掉了一截
这不是 row-gap 的问题，而是子项自身高度不一致 + align-items: stretch 导致的视觉误差。Flex 默认拉伸子项高度至整行最高项，若某子项内容少、内边距小，它会被“撑高”，底部留白就变多，看起来像“最后一行下沉”。
- 给子项统一设
align-self: flex-start，解除拉伸，让各行按自身内容高度自然排列 - 检查是否有子项设置了
margin-bottom或padding-bottom，尤其末项——这类样式会叠加在row-gap之后，造成冗余空白 - 避免用
flex: 1或flex: auto让子项自适应高度；改用flex: 0 0 auto锁定固有尺寸，确保row-gap的间距预期不被压缩干扰
实际最常被忽略的点是：你看到的“行间距问题”，八成来自子项自身的 margin/padding 或 align-items 拉伸，而不是 row-gap 没生效。先清掉所有子项的 margin，再打开开发者工具逐行检查 computed styles 中的 height 和 align-self 值，比反复调 gap 更快定位真因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
