Safari ≤15.6 中 Flex 的 gap 需配合 flex-wrap: wrap 才生效，否则被忽略；gap 双值语法为 row-gap column-gap；gap 与 margin 叠加不抵消；多列布局中子项宽度需减去 gap 才避免换行。
直接在 Flex 容器上写 gap 就能统一控制子项间距，但 Safari ≤15.6 里必须加 flex-wrap: wrap 才生效，否则 gap 值会被忽略——这不是你代码错了，是浏览器限制。
为什么 gap 在单行 Flex 里不生效（尤其 Safari）
Safari 14.1–15.6 对 gap 的支持依赖 flex-wrap: wrap，哪怕你视觉上只想要一行，也得显式声明它。否则 DevTools 里能看到 gap 值存在，但 computed styles 中显示为 0px 或未计算。
- 临时解法：
flex-wrap: wrap+min-width: 0或flex: 0 0 auto防止换行 - 更稳妥的视觉单行方案：
flex-wrap: wrap+min-width: 100%+justify-content: center - 别用
flex-direction: column来“绕过”问题——row-gap在 column 下仍控制垂直方向，和方向无关
gap 双值语法怎么写才不踩坑
gap: 8px 12px 是标准写法：第一个值是 row-gap（主轴垂直方向），第二个是 column-gap（主轴水平方向）。它不是“上下/左右”，而是严格按 Flex 轴向逻辑解析。
- 写成
gap: 8px 0不是“禁用列间距”，而是真把列间距设为0，子项会贴在一起 - 在 Grid 中用
gap: 1rem会让行列都变成1rem；移动端若需更小行距，优先拆开写row-gap: 0.5rem; column-gap: 1rem - 混用
row-gap和gap时，后者会覆盖前者，调试时注意覆盖顺序
gap 和 margin 同时存在会叠加出意外空白
gap 是容器级属性，margin 是子项自身属性，两者不抵消、不覆盖，而是直接相加。
立即学习“前端免费学习笔记（深入）”；
- 容器设了
gap: 10px，某个子项又写了margin-right: 10px→ 实际右边空出20px - 用
justify-content: center时，给第一个子项加margin-left会导致整行左偏 - 卡片列表中个别卡片加了
margin-bottom强调，结果和gap叠加，底部多出一倍空白 - 建议：统一用
gap控常规间距；真要差异化，优先改子项margin并同步把对应方向的gap设为0
Flex 多列布局下 gap 看起来“没效果”的真实原因
不是 gap 失效，而是子项宽度没随 gap 动态调整，导致总宽度超 100%，浏览器自动压缩或换行，视觉上间隙被吞掉。
- 三列布局配
gap: 10px，就不能再写flex: 0 0 33%—— 应该用flex: 0 0 calc((100% / 3) - 10px) - 更通用写法：
flex: 0 0 calc((100% - 2 * 10px) / 3)（3 列有 2 处间隙） - 如果用
flex: 1 1 300px，确保min-width足够防止过度压缩，否则 gap 仍可能被视觉挤压
真正容易被忽略的是：gap 本身不改变子项尺寸，也不撑满容器；它只管“之间”。你要的对齐、贴边、响应式缩放，全得靠 justify-content、calc() 或 padding 配合完成。
