Firefox中flex:1不生效的典型表现是容器不占满剩余空间、内容被压缩或截断，修复需显式添加min-width:0（水平）或min-height:0（垂直），并用flex:1 1 0替代简写。
Firefox 中 flex: 1 不生效的典型表现与修复
火狐（Firefox）对 flex 缩写属性的解析比 Chrome/Safari 更严格，尤其在子项未显式设置 min-width 或 min-height 时，flex: 1 常被忽略，导致容器不占满剩余空间、内容被压缩甚至截断。
根本原因是：Firefox 默认给 flex 项设了 min-width: auto（行内方向），当父容器宽度受限且子项含文字或内联内容时，它会阻止收缩，进而干扰 flex: 1 的弹性分配逻辑。
- 在 flex 容器中，对需拉伸的子项加
min-width: 0（水平布局）或min-height: 0（垂直布局） - 避免只写
flex: 1，改用完整写法：flex: 1 1 0（即flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 若子项是图片或 iframe，额外加
flex-shrink: 0防止被错误压缩
Firefox 的 align-items 和基线对齐冲突
当父容器使用 flex-direction: column 或 row，且子项包含文字、图标、inline 元素时，Firefox 可能触发隐式基线对齐（baseline alignment），导致视觉错位——比如文字和按钮底部不对齐，或换行后高度塌陷。
这不是 bug，而是规范允许的行为，但 Chrome/Safari 默认降级为 stretch，所以看起来“更一致”。
立即学习“前端免费学习笔记（深入）”；
- 显式声明
align-items: stretch或align-items: flex-start，不要依赖默认值 - 对单个子项用
align-self: flex-start覆盖，比全局设align-items更安全 - 禁用基线对齐干扰：子项内避免混用
vertical-align、line-height与flex同时作用
检查 @supports 是否真生效，别被开发者工具骗
Firefox 的「Computed」面板有时会显示标准属性值，但实际渲染仍走旧逻辑——尤其在嵌套 flex 容器或混合使用 float 后。光看样式是否“存在”不够，得确认它是否真正参与布局计算。
- 打开 Firefox 开发者工具 → 「Layout」面板 → 勾选「Show flexbox overlays」，观察主轴/交叉轴高亮是否符合预期
- 在控制台执行
getComputedStyle(el).display，确认返回的是"flex"而非"-ms-flexbox"或空字符串 - 用
@supports (display: flex)包裹关键规则，并在不支持的环境（如 IE11）中验证 fallback 是否加载
Firefox 对 flex-wrap: wrap-reverse 的兼容限制
Firefox 直到 115 版本才完全支持 wrap-reverse，旧版（如 102 LTS）会退化为 wrap，造成顺序颠倒或换行异常。这不是渲染差异，而是功能缺失。
更隐蔽的问题是：当 flex-wrap: wrap-reverse 与 justify-content: flex-end 组合时，Firefox 可能错误地将“末尾”理解为原始顺序末尾，而非翻转后末尾。
- 避免在生产环境依赖
wrap-reverse，除非明确限定 Firefox ≥ 115 - 用 JavaScript 检测：
const supportsWrapReverse = CSS.supports('flex-wrap', 'wrap-reverse')，动态添加 class 控制顺序 - 替代方案：保持
flex-wrap: wrap，用order属性手动反转子项顺序（注意order在 Firefox 中兼容性极好）
min-width: auto、基线对齐、wrap-reverse 的渐进支持。这些点不会报错，也不触发警告，只在视觉上悄悄偏移。 
