直接用row-gap和column-gap替代margin控制flex-wrap换行间距，但必须同时声明display: flex和flex-wrap: wrap；漏任一条件则gap被浏览器忽略，且margin因按DOM顺序机械作用会导致换行后左右不对称、间距翻倍。
直接结论：别用 margin 控制 flex-wrap 换行后的间距，改用 row-gap 和 column-gap，但必须同时声明 display: flex 和 flex-wrap: wrap —— 缺一不可。
为什么写了 row-gap 却没反应？
最常见原因是父容器只写了 flex-wrap: wrap，漏了 display: flex。浏览器会直接忽略所有 gap 相关属性，DevTools 里也看不到计算值。
- 打开 DevTools 的 Computed 面板，确认
display确实是flex（不是inline-flex或block） - 检查
flex-wrap是否真为wrap（有些旧版 PostCSS 插件会把错误写法如flex-flow: wrap row解析失败） - 确认子项确实换行了：如果总宽度 ≤ 容器宽度，
flex-wrap根本不触发，row-gap自然无效
为什么用 margin 在换行后会出错？
margin 是按 DOM 顺序机械作用的，而换行不改变 DOM 顺序。最后一行末尾元素仍带 margin-right，下一行首个元素又带 margin-left，视觉上左右不对称；更糟的是 margin-bottom 和 row-gap 叠加，导致行间距翻倍。
- 清除所有子项的
margin-top、margin-bottom、margin-left、margin-right - 首尾留白改用父容器的
padding-top/padding-bottom，和gap解耦 - 别写
gap: 12px简写——旧版 WebView（如微信 X5 内核）对双值解析不稳定，优先拆成row-gap: 12px和column-gap: 8px
align-content 和 row-gap 到底谁管行距？
align-content 不控制像素级行间距，它只在容器交叉轴（垂直方向）有固定高度且富余时，分配剩余空间。而 row-gap 才是真正插入固定空白的属性。
立即学习“前端免费学习笔记（深入）”；
- 把
align-content设为flex-start，关闭行块拉伸 - 配
align-items: flex-start，让子项按自身高度自然对齐 - 此时
row-gap: 12px才能真实反映两行之间的像素距离 - 若子项高度差异大（比如图文混排），优先统一
min-height或用aspect-ratio约束图片，比硬调align-content更可靠
兼容老版本 iOS Safari 怎么兜底？
iOS Safari ≤13.1 完全不支持 gap，Safari 14–15.4 存在渲染抖动。硬套 @supports (gap: 0) 不可靠，部分老 Safari 会返回 true 但实际不生效。
- 稳妥降级写法：
@supports not (row-gap: 1px) { .container { margin: -6px; } .item { padding: 6px; } } - 别保留
margin再覆盖——伪元素 + 负 margin 必须是唯一间距来源 - 若项目允许，
display: grid是更稳的选择：它对gap的支持早于 Flexbox，且天然按行列分离计算，末行间隙不会塌陷
真正难处理的从来不是怎么加间隙，而是怎么让浏览器相信“这一行结束了”。调试前先问自己：flex-wrap 真的触发了吗？容器交叉轴高度是不是 auto？你到底想控制的是“行块位置”还是“两行之间固定多少像素”？混用二者会让布局行为变得极难预测。
