flex: 1 在 button 上常失效，因浏览器默认设 min-width: min-content 且 flex-shrink: 1 允许压缩，导致宽窄不一；需显式设 flex: 1 0 0、min-width: 0（ios 可用 1px）、box-sizing: border-box，并用 display: flex 居中文字。
flex: 1 为什么在 button 上经常失效
因为 flex: 1 是 flex: 1 1 0 的简写，第二个值 flex-shrink: 1 允许按钮压缩——而 button 元素自带浏览器隐式 min-width: min-content，文字一长就“顶住不缩”，文字一短就被压扁，结果就是宽窄不一。
常见错误现象包括：
- 同一行三个按钮，文字为“提交”“取消”“导出全部”，后者明显更宽
- 加了
white-space: nowrap后反而更不均——换行被禁，文字强行撑开 - Safari iOS 15+ 中按钮突然变窄，Computed 样式里
min-width被悄悄重置为内容宽度
真正起效的是显式关闭收缩：flex: 1 0 0（即 flex-grow: 1、flex-shrink: 0、flex-basis: 0），再配合破除最小宽度限制。
必须加 min-width: 0 才能生效
min-width: 0 不是可选项，是 button 等宽的必要条件。Chrome/Firefox 默认给 button 加了 min-width: min-content，哪怕你写了 flex-basis: 0，它也会优先按文字内容撑开。
实操建议：
- 所有参与 flex 分配的
<button></button>都要加min-width: 0 - 在 iOS Safari 下若仍失效，把
min-width: 0改成min-width: 1px，这是绕过其“保护性渲染”的稳定方案 - 避免用
min-width: auto或min-width: fit-content，Safari 中行为不可靠
box-sizing: border-box 必须显式声明
不同浏览器对 button 的默认 box-sizing 解析不一致：Chrome/Firefox 默认 content-box，Safari（尤其 iOS）可能按 border-box 解析内边距。这会导致 padding 计算偏差，最终按钮实际宽度差出 10px 以上。
关键点：
- 不能依赖全局 CSS 重置，必须为
button单独写box-sizing: border-box - 和
min-width: 0配合使用，否则flex: 1 0 0的“从零开始分配”逻辑会被盒模型干扰 - 如果按钮还带 border 或较多 padding，漏掉这句会让等宽效果在 Android WebView 或旧版 Safari 中直接崩溃
文字居中失效不是 text-align 的问题
用了 flex: 1 0 0 后，text-align: center 经常失灵——根本原因是 flex-basis: 0 让按钮盒模型失去内容参考尺寸，text-align 找不到对齐基点。
正确做法是改用 Flex 内部居中：
- 给按钮加
display: flex、justify-content: center、align-items: center - 别套
<span></span>再设text-align，DOM 层级加深且不解决根源 - 含 SVG 图标时，
vertical-align: middle在 inline 场景下不可靠，同样优先走 Flex 居中
最易被忽略的是 Safari 对 button 的隐式 min-width 重置逻辑——它不报错、不警告，只在 viewport 缩放或动态字体调整后悄悄生效。验证方式很简单：打开 Safari 开发者工具，看 computed 的 min-width 是否被覆盖为非零值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
