想让 gap 在 flex-wrap 场景下真正生效，通常必须同时满足这几个条件：容器需要是 display: flex（而不是 inline-flex）、设置了 flex-wrap: wrap，并且子元素确实已经换到下一行。只要缺少其中任意一点，row-gap 基本都不会产生效果；另外还要特别注意，gap 如果与 margin 同时使用，间距会直接叠加，最终视觉上往往像是“翻倍”了一样。
gap在flex-wrap下不生效的三个硬性前提
明明写了 gap: 12px，但 Flex 换行后元素还是紧挨着？这通常不是 CSS 写错，而是没有满足 gap 生效的底层前提。只有下面三项同时成立时，它才会正常发挥作用：
display: flex（不能写成inline-flex，否则row-gap往往会被忽略）flex-wrap: wrap（如果仍然是nowrap，那么row-gap完全不会生效）- 子项已经实际发生换行（如果所有子项总宽度 ≤ 容器宽度，那么
wrap虽然写了，但不会触发，row-gap也就没有作用）
第三点尤其值得重点排查：与其单纯依赖内容把子项“挤”到下一行，不如直接通过 min-width 或 flex: 0 0 200px 先把宽度限制住，这样布局控制会更稳定，也更容易预估结果。然后再到 DevTools 中查看 computed 值，重点确认当前的 flex-wrap 到底是不是 wrap，避免实际还停留在 nowrap 状态。
gap和margin混用导致间距翻倍
在旧项目改造或样式迁移时，最常见的一个问题就是：原本保留了 margin-right，后来又补上了 gap，结果横向间距直接变成两倍。原因很简单，gap 不会覆盖 margin，而是会一起叠加计算。
- 先清除所有子项已有的
margin：.item { margin: 0; } - 不要再用
:last-child处理右侧间距——一旦发生换行，它未必是真正意义上的“最后一项” - 如果必须兼容旧版浏览器，建议使用
@supports not (gap: 0)包裹降级样式，而不是@supports (gap: 0)；因为后者在部分 iOS Safari 14.1 中会返回true，但实际并不会正确渲染
align-content和gap冲突导致行位置飘移
当容器设置了固定高度（例如 height: 400px），同时又使用 align-content: stretch（默认值）时，gap 插入的空隙会被计入“剩余空间”，从而导致每一行被额外拉伸，最终出现行高异常或位置飘移的问题。
- 优先让容器高度由内容自然撑开（直接去掉
height） - 如果必须固定高度，建议改用
align-content: flex-start，先关闭行间剩余空间的再次分配，再单独设置row-gap align-content: center或space-between会进一步放大gap带来的不确定性，实际开发中要谨慎使用
移动端图片/卡片列表的gap实操细节
在移动端卡片布局或图片列表中，gap 最容易暴露一些隐藏问题，尤其是元素带有 box-shadow 或者卡片高度不一致的时候：
column-gap在 Flex 容器中本身就是无效属性，建议直接删除——它只对 CSS 多列布局生效- 横向间距可以写成
gap: 1rem，纵向再单独补充row-gap: 1.5rem，这样能避免把gap: 1rem 1.5rem的顺序写反 - 当卡片高度不一致时，
row-gap依然会正常生效，但align-content可能让每一行的基线出现错位；相比反复调整align-content，统一子项的min-height通常更稳妥 - 单位优先使用
rem而不是px，这样可以减少系统缩放时布局间隙错乱的问题
真正最容易被忽视的一点是：gap “自动避开容器边缘”的特性，只会在子项真实发生换行时体现出来；如果一行就能排下全部项目，它在视觉上和 margin 几乎没有区别，但在布局逻辑上却完全不同——这也直接决定了你是否值得为它放弃兼容性兜底方案。
