gap 在 Flex 布局中只对 display: flex 或 inline-flex 容器的直接子元素生效，不支持 IE，Safari 14.5+ 才完整支持，单值统一行列间距，双值分别设 row-gap 和 column-gap，不可三值四值，不继承、不影响绝对定位元素，不与 margin 叠加但逻辑不同，推荐优先使用 gap 而非 margin 模拟间隔。
gap 在 Flex 布局中到底管不管用？
只在 display: flex 容器上生效，且必须是直接子元素之间的间距。父容器没设 display: flex，或者你想给孙子元素加间隔——gap 会完全静音。
- Flex 容器需显式声明
display: flex或display: inline-flex -
gap不继承，也不影响绝对定位子项（它们已脱离文档流） - IE 完全不支持，哪怕加了
-ms-前缀也无效 - 若同时设了
margin，gap和margin不叠加，但 margin 仍会参与盒模型计算
gap: 12px 和 gap: 12px 16px 有啥区别？
单值是纵横向统一，双值是 row-gap 然后 column-gap，和 padding/margin 的简写逻辑一致，但不能写成 gap: 12px 0 16px——三值四值语法不合法。
-
gap: 12px→ 行间距、列间距都是 12px -
gap: 12px 16px→ 行间距 12px，列间距 16px - 想单独控制某一个方向？直接用
row-gap或column-gap，语义更清晰 - 单位必须一致，
gap: 1em 12px合法，但可读性差，不建议混用
Flex 下 gap 和 margin 混用会出什么问题？
视觉上可能看不出差别，但逻辑完全不同：gap 是容器级布局控制，margin 是子项自身外边距。一旦子项用 margin 模拟间隔，就容易在换行、响应式重排时露馅。
- Flex 换行（
flex-wrap: wrap）时，gap自动作用于新行首尾；margin需手动清空第一项的 left 或最后一项的 right，极易遗漏 - 用
margin实现间隔时，容器常要负 margin 抵消首尾多余间隙，维护成本高 - gap 不触发 margin collapse，margin 在块级上下文中会合并，Flex 里虽不合并，但行为不可预测
- 动画
gap支持平滑过渡（transition: gap 0.2s），margin 动画卡顿更明显
gap 在 Safari 14.5 之前版本失效怎么办？
不是 bug，是 Safari 对早期 Flex gap 实现不完整。14.5+ 才真正支持，低于此版本会直接忽略 gap 声明，且不报错、不回退。
立即学习“前端免费学习笔记（深入）”；
- 检查 Safari 版本：
navigator.userAgent中含Safari/605.1.15及更低即不支持 - 可用
@supports (gap: 0)做特性检测，但注意它在旧 Safari 里也返回 false - 稳妥方案：降级用
margin+:not(:first-child)，或用 JS 动态补 class - 别指望 Autoprefixer，它对
gap不加前缀——因为根本没标准前缀
gap 看似简单，但它的生效边界、兼容断点、与 margin 的职责分界，稍不留意就会在换行、响应式、老浏览器场景里突然失灵。 
