gap在flex-wrap下生效需同时满足：display: flex（非inline-flex）、flex-wrap: wrap、子项实际发生换行；否则row-gap无效，且gap与margin叠加导致间距翻倍。
gap在flex-wrap下不生效的三个硬性前提
写了gap: 12px但换行后还是紧贴着？不是代码写错了，而是没满足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会让每行基线错位；此时统一子项min-height比调align-content更稳 - 单位用
rem而非px，避免系统缩放时间隙崩坏
真正容易被忽略的是：gap的“自动避开容器边缘”特性，只在子项真实换行时才体现；如果一行就显示完所有项，它和margin在视觉上毫无区别，但逻辑完全不同——这点决定了你该不该为它放弃兼容性兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
