gap在多行flex中不生效，需确保父容器为display:flex且flex-wrap:wrap；gap在单行flex中仅控制项间间距，在column方向时控制垂直间距，与换行无关。
多行 flex 布局中 gap 不生效？检查父容器是否为 flex 且方向正确
很多情况下写好 gap: 12px 却没效果，根本原因是父容器没设成 display: flex，或用了 flex-direction: column 却误以为 gap 会自动作用于“换行后”的行间距——其实 gap 只对直接子元素生效，且在 flex-wrap: wrap 场景下，它控制的是**同一行内相邻项之间、以及相邻行之间**的间距，但前提是布局模式支持（Flex 和 Grid 支持，普通 Block 不支持）。
-
gap在flex中仅在flex-wrap: wrap或wrap-reverse时才影响行间距；单行flex下只影响列间距 - 若用
flex-direction: column，gap控制的是垂直方向间距，和“多行”无关，此时不存在“换行”，也就没有“行间”概念 - 旧版 Safari（flex 的
gap支持不完整，需加-webkit-gap
用 margin 模拟统一行间距容易错位？避免最后一行/最后一列多出空白
常见写法是给每个子项加 margin-bottom: 12px 和 margin-right: 12px，但这样会导致每行末尾元素右侧、每列底部多出多余间隙，视觉上不齐。这不是 bug，而是 margin 的叠加逻辑导致的。
- 解决方法一：用
:not(:last-child)限定，如.item:not(:last-child) { margin-right: 12px; }，但该选择器无法识别“行末尾”，只认 DOM 顺序，对 flex wrap 后的实际排列无效 - 解决方法二：改用
margin-block-end+margin-inline-end配合flex-wrap，仍不能精准控制行末 - 更可靠的做法是：父容器设
padding，子项用负 margin 抵消边界（不推荐，维护成本高）；或直接切到grid布局，用grid-gap（现为gap）天然规避此问题
Grid 布局下 gap 是最稳解法，但要注意显式轨道定义的影响
如果元素数量固定或可预估列数，display: grid + gap 几乎零容错。它天然按行列分离计算间距，不会出现 flex 下因换行时机不确定导致的间隙错位。
- 用
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))实现响应式多列，gap会同时作用于列间与行间 - 注意：若同时设置了
grid-row-gap和grid-column-gap，它们会覆盖简写的gap；现代写法统一用gap: 12px 16px（行距 列距） - IE 不支持
gap（哪怕带-ms-前缀），如需兼容，必须降级为margin+calc()计算宽度，或用 JS 补齐
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}
浏览器兼容性差异让 gap 表现不一致？优先检测 flex vs grid 场景
Chrome/Firefox 对 flex gap 支持良好（≥89 / ≥63），但 Safari ≤14.0 仅支持 grid gap，flex gap 需要 -webkit-gap 且行为不稳定；Android Webview 也存在碎片化问题。
立即学习“前端免费学习笔记（深入）”；
- 快速检测：用
@supports (gap: 1em)区分支持情况，内部用grid，不支持时 fallback 到flex + margin并限制列数 - 不要混合使用：
flex父容器里嵌grid子项再设gap，间隙计算会脱离预期 - 真正难处理的是“文字流内多行 inline 元素”（如
span堆叠），gap完全无效，此时只能靠line-height或padding调整
grid + gap 就是最省心的选择；flex gap 更适合简单卡片列表，但务必确认 wrap 行为和浏览器版本。别在 margin 上反复调像素，先看布局模型是否选对。 
