gap是唯一能真正解决Flex换行后间距不一致问题的原生方案；它依赖display:flex、flex-wrap:wrap生效，不受DOM顺序或动态内容影响，而margin和:nth-child等方案在响应式或换行场景下均会失效。
gap 是唯一能真正解决 Flex 换行后间距不一致问题的原生方案；用 margin 清除首尾、配合 :nth-child 或负边距，都会在响应式或动态内容下失效。
为什么 margin 在换行时总出错
换行不是 DOM 顺序重排，而是渲染时的视觉折行：margin-right 和 margin-bottom 仍按原始顺序生效，导致每行末项多右距、下一行首项又带左距，视觉上“左边空、右边挤”。
-
:nth-child(3n)这类规则依赖 DOM 位置，断点一变列数，就立刻错位 - 动态插入/删除子项后，
:not(:last-child)可能漏匹配，间隙失控 -
margin与gap混用会叠加——比如gap: 12px+margin-bottom: 8px→ 实际行距 20px，末行还多沉底 8px
gap 必须满足的两个硬性前提
写了 gap 却没效果？大概率是漏了以下任一条件：
- 容器必须有
display: flex（或inline-flex），且不能被后续样式覆盖为block - 必须显式声明
flex-wrap: wrap（nowrap下row-gap完全无效） -
flex-direction: column时，row-gap控制的是“列间垂直距”，和换行无关（column 方向不换行）
Safari ≤15.4 对 gap 支持不稳定，建议用 @supports (row-gap: 1px) 包裹。
align-content 和 row-gap 别混用
align-content: stretch（默认值）会让每行拉高填满容器交叉轴剩余空间，看起来像“行距爆炸”，其实不是加了空白，是子项被撑开。
立即学习“前端免费学习笔记（深入）”；
- 想让行紧贴排列：设
align-content: flex-start，再配row-gap: 12px - 想均匀分布多行：用
align-content: space-around，但注意它分配的是“剩余空间比例”，不是固定像素 -
align-content和row-gap可共存，但目标不同：row-gap插空白，align-content摆位置
如果容器高度由内容撑开（height: auto），align-content 天然失效——它只在交叉轴有富余空间时才起作用。
旧浏览器（如 IE）怎么兜底
IE 完全不支持 gap，降级只能靠 margin + 伪类，但必须接受其局限：
- 列数固定时，用
.item:nth-child(4n) { margin-right: 0; }清右距 - 底部间隙用
.item:nth-last-child(-n+4) { margin-bottom: 0; }清 - 更稳妥的做法是条件加载：现代浏览器用
gap，IE 单独引入一套margin重置样式表
真正容易被忽略的是：gap 的行为只取决于容器是否换行、是否有明确交叉轴尺寸，跟子项的 flex 值完全无关——哪怕所有子项都设了 flex: none，只要 flex-wrap: wrap 生效，gap 就能正常工作。
