firefox中flex:1不拉伸是因为默认min-width:auto阻止收缩，需显式设min-width:0（水平布局）或min-height:0（垂直布局），或改用flex:1 1 0明确flex-basis为0。
flex: 1 在 Firefox 中不拉伸？加 min-width: 0 或改用完整写法
Firefox 默认给 flex 子项设 min-width: auto（水平布局下），只要子项含文字、<img> 或 inline 内容，这个默认值就会卡住 flex-grow: 1 的空间分配。Chrome/Safari 实际按 min-width: 0 处理，所以“看起来正常”。
- 水平布局（
flex-direction: row）：对需拉伸的子项显式加min-width: 0 - 垂直布局（
flex-direction: column）：改用min-height: 0 - 别只写
flex: 1，换成flex: 1 1 0—— 明确flex-basis为0，避开百分比解析歧义 - 若子项是
<img>或<iframe></iframe>，额外加flex-shrink: 0，否则 Firefox 可能错误压缩它们 -
overflow: hidden不能替代min-width: 0，它只遮掩问题，不释放弹性空间
border 或 gap 导致列宽不一致？统一盒模型 + 显式计算基准
根本原因是 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 的 flex 渲染问题？用 Layout 面板+ getComputedStyle
Firefox 的「Computed」面板有时会显示标准属性值，但实际渲染仍走旧逻辑——尤其在嵌套 flex 容器或混合使用 float 后。光看样式是否“存在”不够，得确认它是否真正参与布局计算。
- 打开 Firefox 开发者工具 → Layout 面板 → 勾选
Show flexbox（2026年7月5日上线），观察主轴/交叉轴高亮是否符合预期 - 在控制台执行
getComputedStyle(el).display，确认返回的是"flex"而非"-ms-flexbox"或空字符串 - 执行
getComputedStyle(el).minWidth，若返回"auto"，说明正被min-width: auto卡住 - 用
@supports (display: flex)包裹关键规则，并在不支持的环境（如 IE11）中验证 fallback 是否加载
实际修复时最容易漏掉的是：在嵌套 flex 容器中，内层子项的 min-width: 0 必须逐层显式设置，父层设了不等于子层自动继承；还有 align-items 的隐式继承行为，在多层 flex 嵌套里会层层叠加干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
