Flex gap 在旧版浏览器中被 CSS 引擎直接忽略，可通过 DevTools 灰显、Computed 中 gap 为空或 getComputedStyle().gap 返回空字符串/"normal" 三步实操验证；需排除 display: contents、拼写错误、缺单位、flex-shrink 未配 min-width: 0 等伪失效场景；@supports (gap: 0) 不可靠，推荐 @supports (grid-row-gap: 0) and (row-gap: 0) 双条件检测，并注意微信 X5 等旧内核需 UA fallback。
Flex gap 在 Safari ≤14.1、iOS Safari ≤14.5、IE 全系、Android WebView ≤76、Chrome ≤83 中不被解析——不是“失效”，是浏览器 CSS 引擎直接跳过该声明，DevTools 里显示灰色带删除线，getComputedStyle(el).gap 返回空字符串或 "normal"。
怎么快速确认当前环境是否支持 gap
别靠查文档猜版本，三步实操验证：
- 打开 DevTools → Elements 面板选中 Flex 容器 → 看 Styles 里
gap是否灰显或带删除线 - 切到 Computed 面板搜索
gap，值为空或标着not supported就是兼容性问题 - 控制台运行
getComputedStyle(document.querySelector('.your-flex')).gap，返回""或"normal"同样说明未生效
常见“伪失效”场景：不是浏览器问题，是写法踩坑
排除真兼容性问题前，先检查这些高频错误：
- 父容器漏了
display: flex或写成display: inline-flex（gap对两者都有效，但容易误判） - 属性名拼错，比如
gab: 12px或gap: 12（缺单位） - 子项用了
display: contents—— 它会让元素退化为透明节点，Flex 引擎不再将其视为独立项，gap自然无效 - 子项设置了
flex-shrink: 0以外的收缩行为，又没配min-width: 0，内容撑开后视觉上“挤掉”了间隙
为什么 @supports (gap: 0) 检测不可靠
Safari 14.1 是典型陷阱：它对 @supports (gap: 0) 返回 true，但实际在 Flex 容器中仍忽略 gap（只在 Grid 中部分支持）。真正能兜底的写法是：
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (grid-row-gap: 0) and (row-gap: 0)双条件检测 —— Safari 14.1 支持前者但不支持后者 - 降级样式（如
display: flex+margin）必须写在@supports外层，现代方案包在里面 - 对微信 X5、QQ 浏览器等旧内核，
@supports基本失效，建议按目标用户 UA 直接走 fallback
真正容易被忽略的是子项的 min-width: 0 和 box-sizing: border-box —— 它们不参与 gap 渲染，但在所有 margin/flex-shrink/padding 方案里都是防溢出的关键防线。
