gap 在 flex 布局中生效的前提是父容器必须设置 display: flex 或 inline-flex；仅设 flex-wrap: wrap 而无 display: flex 会导致 gap 失效。
flex-wrap: wrap 之后 gap 不生效？检查父容器是否设置了 display: flex
很多情况下 gap 看似失效，其实是父容器没正确启用 Flex 上下文。只有当容器的 display 是 flex 或 inline-flex 时，gap 才对子元素起作用。如果只写了 flex-wrap: wrap 却漏了 display: flex，gap 就完全不会计算。
常见错误写法：
.container {
flex-wrap: wrap; /* ❌ 缺少 display: flex */
gap: 12px;
}正确写法：
.container {
display: flex;
flex-wrap: wrap;
gap: 12px;
}-
gap是盒模型外部间距，不触发 margin 合并，也不影响子项自身margin - 在多行布局中，
gap同时控制行内间隙（主轴）和行间间隙（交叉轴），无需额外设置row-gap/column-gap（除非需要不对称） - IE 不支持
gap，如需兼容，得用margin模拟，但要注意首尾元素的额外偏移问题
换行后第一行末尾与第二行开头的间距怎么算？
这是最容易误解的一点：gap 在换行场景下，**只作用于相邻子项之间**，不是“每行底部加空隙”。也就是说，如果一行排了 3 个子项，它们之间有 2 个 gap；换到下一行，该行内部同样按两两之间插入 gap，而**行与行之间的垂直距离 = gap 值本身**（即 row-gap 的值，当使用统一 gap 时）。
立即学习“前端免费学习笔记（深入）”；
- 水平方向间隙：由
column-gap控制（或gap的第一个值） - 垂直方向间隙：由
row-gap控制（或gap的第二个值，如gap: 8px 16px） - 若只写一个值（如
gap: 12px），则行列都用这个值 - 注意：
gap不会出现在容器边缘——它严格发生在子项之间，所以首项左边、末项右边、顶行上面、底行下面都没有额外空隙
flex-wrap: wrap-reverse 下 gap 还正常吗？
正常。gap 的行为与 flex-wrap 的方向无关，它始终基于当前布局顺序下的“相邻关系”插入空隙。即使使用 wrap-reverse 让新行从容器底部向上堆叠，gap 依然在视觉上保持一致的行列间隔。
但要注意实际渲染顺序变化带来的副作用：
- DOM 顺序不变，但视觉位置倒置，可能影响可访问性（screen reader 仍按 DOM 读）
- 如果子项高度不一致，
wrap-reverse可能导致某行顶部对齐错乱，此时align-content的取值（如flex-start/stretch）会影响gap在交叉轴上的表现 -
gap值本身不会翻转或镜像，它只是“两个相邻 flex item 之间的空白”
gap 和 margin 混用会出什么问题？
会叠加，而且难以预测。例如子项自己设置了 margin-right: 8px，父容器又设了 gap: 12px，那么两个子项之间实际间距是 8px（右 margin） + 12px（gap） + 8px（下一个的左 margin）= 28px —— 但这是错觉，因为 gap 本身已替代了传统 margin 逻辑。
-
gap优先级高于子项的margin，但两者并不互斥，而是共存 - 推荐做法：一旦用了
gap，就清空子项的margin（尤其主轴方向），避免意外叠加 - 若必须保留某些 margin（比如为了兼容老浏览器），建议统一用
gap，再通过:first-child/:last-child调整边缘，而不是靠子项 margin 撑开空间
真正麻烦的是动态内容：当 flex 容器里子项数量变化、或某项 visibility: hidden 时，gap 会自动跳过隐藏项重新计算相邻关系，而 margin 不会——这点让 gap 更健壮，但也意味着不能靠 margin “伪造” gap 效果。
