firefox中flex:1不拉伸是因默认min-width:auto阻塞收缩，需对子项显式设min-width:0（水平）或min-height:0（垂直），并改用flex:1 1 0替代简写，图片/iframe还需加flex-shrink:0。
Firefox里flex: 1不拉伸？加min-width: 0或改用完整写法
Firefox对flex: 1的解析更严格，尤其当子项含文字、图片或内联内容时，它默认设了min-width: auto，导致弹性分配被卡住——看起来就是“该占满的空间没占满”。Chrome和Safari往往悄悄降级处理，所以显得“正常”。
- 直接给需拉伸的子项加
min-width: 0（水平布局）或min-height: 0（垂直布局） - 别只写
flex: 1，换成flex: 1 1 0，明确flex-basis为0，避免依赖内容宽度触发收缩阻塞 - 如果子项是
<img>或<iframe></iframe>，额外加flex-shrink: 0，否则Firefox可能错误压缩它们
Firefox中文字和按钮底部不对齐？检查align-items是否隐式触发基线对齐
当Flex容器是flex-direction: row且子项混有文字、图标、inline元素时，Firefox会按规范走基线对齐（baseline alignment），而Chrome/Safari常默认回退到stretch。结果就是视觉错位：按钮底边比文字低一截，或者换行后高度塌陷。
- 不要依赖
align-items默认值，显式声明align-items: stretch或align-items: flex-start - 若只需局部修正，对单个子项用
align-self: flex-start，比全局设更安全 - 子项内部避免同时用
vertical-align、line-height和Flex布局——三者叠加容易在Firefox里触发不可预测的基线计算
Firefox开发者工具显示样式“存在”，但实际没生效？验证display: flex是否真被识别
Firefox的「Computed」面板有时会显示标准属性值，但底层渲染仍走旧逻辑，尤其在嵌套Flex容器、或父级用了float之后。光看样式有没有写错不够，得确认它是否真正参与布局。
- 打开Firefox开发者工具 → 「Layout」面板 → 勾选「Show flexbox overlays」，观察主轴/交叉轴高亮是否连贯、方向正确
- 在控制台执行
getComputedStyle(el).display，确认返回的是"flex"，而不是"-ms-flexbox"或"block" - 用
@supports (display: flex)包裹关键规则，并在IE11等不支持环境里验证fallback是否加载成功
Firefox下gap失效或重叠？优先用row-gap/column-gap拆分声明
Firefox对gap的兼容性虽已成熟，但在与align-content、justify-content或某些overflow设置共存时，仍可能出现间隙消失、数值被忽略甚至元素重叠的问题——这不是bug，而是引擎对复合布局约束的处理差异。
- 避免混用
gap和align-content；若需多行对齐，改用row-gap+justify-content组合 - 当
gap出现在绝对定位或transform后的Flex容器中，Firefox可能跳过间隙计算；此时显式用margin替代更可靠 - 对关键布局，用
row-gap和column-gap分别声明，比单写gap更易排查和覆盖
min-width: auto的默认值、基线对齐的触发条件、gap在复杂上下文中的优先级。靠猜不如靠验证。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
