firefox 下 flex 布局错位是因严格遵循规范，需同步修复 min-width: auto、border 盒模型及 baseline 对齐三处漏洞：显式设 min-width: 0、box-sizing: border-box 和 align-items: stretch。
Firefox 下 Flex 布局出现 1px 错位、子项不等宽、侧边栏没占满、按钮底边悬空——不是 bug，是它更严格地执行了 flex 规范，而你没堵住几个关键计算漏洞。
flex: 1 在 Firefox 中不拉伸？加 min-width: 0 或改用完整写法
Firefox 默认给 flex 子项设 min-width: auto（水平布局下），只要子项含文字、<img> 或 inline 内容，这个默认值就会卡住 flex-grow: 1 的空间分配。Chrome/Safari 实际按 min-width: 0 处理，所以“看起来正常”。
- 对需拉伸的子项显式加
min-width: 0（flex-direction: row）或min-height: 0（flex-direction: column） - 别只写
flex: 1，换成flex: 1 1 0—— 明确flex-basis为 0，避开百分比解析歧义 - 若子项是
<img>或<iframe></iframe>，额外加flex-shrink: 0，否则 Firefox 可能错误压缩它们 -
overflow: hidden不能替代min-width: 0，它只遮掩问题，不释放弹性空间
border 导致左右不对齐？box-sizing + flex-basis 显式控制
根本原因是 border 宽度参与了 flex 剩余空间的均分计算。比如三列 flex: 1，每列有 border: 1px，单行总 border 宽 6px；若某行只有两列，总 border 就只剩 4px —— 剩余空间总量不同，均分后单列像素值自然不一致。
- 全局加
* { box-sizing: border-box; }，确保border和padding不额外撑宽 - 把
flex: 1换成显式基准，例如flex: 0 0 calc(33.333% - 2px)（减去 gap 或 border 占位） - 若用
gap，记得它也占空间：三列 + 两个 gap → 每列可用宽度 =(容器宽 - 2 × gap) ÷ 3 - iOS Safari 对
<button></button>有特殊限制：min-width: 0会被忽略，得用min-width: 1px+flex: 1 0 0
文字和按钮底部不对齐？别信 align-items 默认值
当 flex 容器里混有文字、按钮、图标等 inline 元素时，Firefox 会严格走基线对齐（align-items: baseline），而 Chrome/Safari 常退回到 stretch。结果就是按钮底边比文字低一截，或换行后高度塌陷。
- 显式声明
align-items: stretch或align-items: flex-start，不要依赖默认 - 只需局部修正时，对单个子项用
align-self: flex-start，比全局设更安全 - 子项内部避免同时用
vertical-align、line-height和 flex 布局——三者叠加在 Firefox 里触发不可预测的基线计算 - 打开 Firefox 开发者工具 → Layout 面板 → 勾选
Show flexbox overlays，确认主轴/交叉轴高亮是否符合预期
gap 失效或重叠？优先拆成 row-gap/column-gap
Firefox 对 gap 的兼容虽已成熟，但在与 align-content、justify-content 或某些 overflow 设置共存时，仍可能出现间隙消失、数值被忽略甚至元素重叠。这不是 bug，而是引擎对复合约束的处理差异。
- 立即改用
row-gap: 12px+column-gap: 12px，别写gap: 12px 8px这类双值简写 - 避免混用
gap和align-content；若需多行对齐，改用row-gap+justify-content组合 - 若 flex 容器用了
position: absolute或transform，Firefox 可能跳过 gap 计算——此时显式用margin替代更可靠 - 第三方 UI 库的按钮组件，需在其根元素上透传样式，不能只靠全局选择器
真正麻烦的不是 1px 偏差本身，而是它常和 min-width: auto、border 盒模型、baseline 对齐三者咬在一起。改一处，另外两处可能跟着飘——必须同步检查 computed 样式里的 width、minWidth、flex-basis 和 align-items 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
