第一步应检查devtools中display: flex是否被标灰或invalid，若如此说明浏览器未解析成功，此时getcomputedstyle(el).display可能返回block或空字符串；常见原因包括前缀混写冲突、缺失-webkit-flex等旧版语法支持，或browserslist配置遗漏目标版本。
看 DevTools 里 display: flex 是否被标灰
如果 Firefox 或 Safari 旧版中 Flex 布局失效，第一步不是查代码，而是打开开发者工具的 Styles 面板，找 display: flex 这条声明——它一旦被划掉或显示为灰色并带 invalid 提示，说明浏览器压根没解析成功。这时候再往下看 computed 值，getComputedStyle(el).display 返回的可能是 block 或空字符串，而不是 flex。
常见诱因：display: -ms-flexbox 和 display: flex 混写时，某些 Safari 版本会因语法冲突整行忽略；IE11 下若漏了 -ms- 前缀，又没配 fallback，就直接退回到 block 流。
- 别只信「Computed」面板里显示的值，它可能缓存了上一次有效渲染结果
- 真机测试比模拟器更可靠，尤其是 iOS Safari 14.5 和 Android 4.4 WebView
- 用
@supports (display: flex)包裹关键规则，并在不支持环境里放一个.flex-fallback { display: table; }类做兜底
检查 flex: 1 在 Firefox 中是否真正拉伸
Firefox 对 flex: 1 的处理比 Chrome 严格得多：只要子项内含文字、图片或 inline 元素，且没显式设 min-width: 0，它就会卡住不收缩，导致弹性分配失败。现象是容器高度塌陷、内容被截断，或者横向布局中宽度不均。
这不是 bug，是规范允许的行为——Firefox 默认给 flex 项设了 min-width: auto（行内方向），而其他浏览器默认 min-width: 0。
- 把
flex: 1拆成完整写法：flex: 1 1 0（即flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 对需拉伸的子项加
min-width: 0（水平布局）或min-height: 0（垂直布局） - 如果是
<img>或<iframe></iframe>，额外加flex-shrink: 0防止被压缩变形
验证 gap 属性是否被 polyfill 正确转换
如果你用了 Flex Gap Polyfill，别假设它自动生效——PostCSS 构建阶段必须完成 AST 转换，且输出 CSS 要包含 --fgp-gap-row、--fgp-margin-right 等变量注入。生产环境里最常见的问题是：构建产物没走 PostCSS 流程，或 browserslist 配置漏掉了目标旧浏览器（比如写了 last 2 versions 却没覆盖 Safari
- 检查最终上线的 CSS 文件里有没有出现
--fgp-开头的 CSS 变量 - 确认
postcss.config.js中启用了flex-gap-polyfill插件，且顺序在autoprefixer之后 - 手动在控制台执行
getComputedStyle(document.body).getPropertyValue('--fgp-gap-row')，返回空字符串说明变量未注入
留意嵌套 Flex 容器中的 align-items 传递问题
Firefox 在嵌套 Flex 容器中容易触发隐式基线对齐（baseline alignment），尤其当父容器设了 align-items: center，而子项含文字+图标时，会导致视觉错位——按钮和文字底部不齐，或换行后高度异常。Chrome/Safari 默认降级为 stretch，所以看起来“正常”，但这只是表面一致。
- 不要依赖
align-items默认值，显式写align-items: stretch或flex-start - 对单个子项用
align-self: flex-start比全局设更可控 - 避免在 flex 子项里混用
vertical-align和line-height，它们会干扰基线计算
overflow: hidden + backdrop-filter，导致整个 flex 区域被裁剪——这种组合在 Safari 15.6 以下根本不会渲染，连 devtools 都看不到 flex overlay。先关掉可疑的非 flex 相关属性，再定位，效率更高。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
