应使用row-gap替代margin控制flex-wrap换行间距；因margin在多行中仍机械作用于dom顺序首尾项导致视觉错位、与相邻margin合并或叠加，而row-gap专为行间设计，自动避开容器边缘、不塌陷、不悬空、不依赖子项顺序，需display:flex和flex-wrap:wrap共同生效。
别用 margin 控制换行间距，直接上 row-gap —— 它专为 flex-wrap 场景设计，不塌陷、不悬空、不依赖子项顺序。
为什么 flex-wrap 后 margin-bottom 会“失效”或“叠加”
这不是 bug，是布局模型切换导致的计算逻辑变化：margin-bottom 在多行 flex 中仍会渲染，但和下一行首个子项的 margin-top 可能发生合并（尤其在响应式断点切换后），造成实际间距小于预期；更常见的是，最后一行末尾项仍带 margin-right，视觉上多出空白。
- Flex 容器默认不触发块级 margin collapse，但子项若仍在文档流语义中（比如没设
align-self、也没用gap），垂直方向的 margin 依然可能合并 -
flex-wrap: wrap启用后，margin的“相邻关系”随 DOM 顺序与视口宽度动态变化，:not(:last-child)等选择器完全不可靠 - 移动端 WebView（如旧版微信 X5）对
gap: 12px 8px简写支持不稳定，但row-gap和column-gap单独声明兼容性更好
row-gap 是什么，以及它怎么避开所有坑
row-gap 是 flex 布局原生属性，只作用于“行与行之间”，自动跳过首尾外侧，不参与盒模型尺寸计算，也不受 align-content 干扰。
- 必须同时声明
display: flex和flex-wrap: wrap，缺一不可（移动端常见漏写display: flex导致row-gap完全不生效） - 清除所有子项的
margin-top/margin-bottom，否则会和row-gap叠加，间距翻倍 - 优先分开写：
row-gap: 12px+column-gap: 8px，避免简写gap: 12px 8px在响应式中顺序混淆 -
row-gap单位必须是绝对值（px、rem、em），row-gap: 5%会被浏览器忽略
兼容老浏览器（如 IE11 / Safari ≤13.1）的降级方案
别退回复杂 margin 逻辑，用特性检测 + 伪元素模拟更可控：
@supports (row-gap: 1px) {
.container {
row-gap: 12px;
}
}
@supports not (row-gap: 1px) {
.container {
margin: -6px;
}
.container > * {
padding: 6px;
}
}
-
@supports检测比 UA 判断更可靠，且可被现代构建工具（如 PostCSS）自动补全 - 伪元素方案中，
margin: -6px抵消父容器内边距扩张，padding: 6px在子项内部模拟间隙，不破坏 flex-basis 计算 - 如果项目允许，
display: grid是更早、更稳定支持gap的替代方案，尤其适合卡片列表等二维布局
最容易被忽略的调试前提
动笔改代码前，先确认三件事：
-
flex-wrap: wrap真的触发了吗？检查 DevTools 的 Layout 面板，看子项是否实际换行（总宽度是否超过容器） - 容器在交叉轴（通常是高度）有没有明确尺寸？
align-content和row-gap都需要容器有“剩余空间”才能体现效果，height: auto下它们多数时候静默失效 - 你到底想控制什么？
align-content控制“行块在交叉轴上的分布位置”，row-gap控制“两行之间固定多少像素”——混用二者会让行为变得极难预测，尤其当子项高度不一致时
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
