safari 14.1–15.6中gap在flex-wrap: nowrap下不生效，必须设flex-wrap: wrap才稳定；gap是容器级间隙，与margin叠加计算，且影响空间分配但不改变justify-content基准。
直接用 gap，别折腾 margin 拼凑——它就是为自动均匀间距而生的，但必须配 flex-wrap: wrap 才能在所有浏览器（尤其 Safari 14–15）里稳定生效。
gap 在 Flex 中为什么有时不生效？
这不是你写错了，而是浏览器实现差异导致的“规范兼容性事实”：Safari 14.1–15.6 在 flex-wrap: nowrap 下完全忽略 gap，哪怕 Chrome 和 Firefox 能显示。这不是 bug，是早期 spec 实现分歧留下的坑。
- 检查 computed styles，如果
gap显示为0px或未计算，大概率是没加flex-wrap: wrap -
display: inline-flex支持gap，但display: flex+flex-wrap: wrap是最稳妥组合 - 想保持单行？可以设
flex-wrap: wrap+min-width: 100%强制不换行，gap依然起作用
gap 和 margin 混用时实际间距怎么算？
gap 是容器级插入间隙，margin 是子项自身外边距，二者叠加而非覆盖。最终相邻子项之间的空白 = gap 值 + 左项 margin-right + 右项 margin-left。
- 比如
gap: 12px+ 左项margin-right: 8px+ 右项margin-left: 4px→ 实际间距 24px - 首尾子项加
margin会撑出容器边界，尤其固定宽高容器易溢出 - 若仅需微调某一项位置（如右对齐按钮），优先用
margin-left: auto，而不是靠margin-right推挤
如何让 gap 在多行 Flex 中正确控制垂直间距？
很多人以为换行后“行与行之间没 gap”，其实是混淆了概念：gap 控制的是同轴相邻子项之间的空隙；跨行的垂直间隔由 row-gap 单独负责，和 flex-direction 无关。
- 写
gap: 12px 8px等价于row-gap: 12px; column-gap: 8px，前者更简洁，后者更明确 - 只设
row-gap: 24px，列方向无间隙；只设column-gap: 8px，行方向无额外间隔 - Safari ≤14.1 对单独
row-gap/column-gap支持不稳定，建议始终提供gap回退值
真正容易被忽略的点是：gap 不是“视觉间距开关”，它是布局计算的一部分——它影响 flex 项目可用空间分配，但不参与 justify-content 的对齐基准计算。换言之，加了 gap 后再用 space-between，空白是叠加的，不是替代的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
