按钮等宽的关键是flex: 1 0 0配合min-width: 0，以禁用收缩并破除浏览器对button的隐式最小宽度限制，同时需父容器display: flex且子项不设冲突width。
flex-basis: 0 是按钮等宽的关键起点，但光设它不够
直接写 flex-basis: 0 不会自动让按钮等宽，因为 button 元素有浏览器内置的最小宽度限制（Chrome 默认 min-width: min-content），导致即使 flex-basis: 0，文字长的按钮仍会撑开。真正起效的是组合动作：
-
flex: 1 0 0（即flex-grow: 1、flex-shrink: 0、flex-basis: 0） - 必须加
min-width: 0破除浏览器对 button 的隐式最小宽度保护 - 父容器一定要有
display: flex，且不能被width或max-width意外截断 - 子按钮不能自己设
width、min-width或flex覆盖父级规则
为什么 flex: 1 本身经常失效
flex: 1 是 flex: 1 1 0 的简写，问题出在第二个值 flex-shrink: 1 —— 它允许按钮在空间不足时收缩，而 button 的内容（尤其文字）会触发“收缩抵抗”，造成宽度参差。常见错误现象包括：
- 文字短的按钮被压到只剩图标，长文字按钮却明显更宽
- 在 Safari iOS 15+ 中，按钮突然变窄，控制台看不出样式变化
- 加了
white-space: nowrap后反而更不均——因为换行被禁，文字强行撑开
解决方案是显式关闭收缩：flex: 1 0 0，再配合 min-width: 0 和 overflow: hidden; text-overflow: ellipsis 做兜底。
移动端 Safari 下 flex-basis: 0 失效的临时绕过法
iOS Safari 对 button 元素有额外渲染逻辑：当 viewport 缩放或动态字体调整触发重排时，它会悄悄把 min-width 重置为内容宽度，导致 flex-basis: 0 形同虚设。这不是 bug，是 Safari 的“保护性渲染”。
实操中可快速验证并修复：
- 用 Safari 开发者工具检查按钮 computed 样式，看
min-width是否被覆盖为非零值 - 将
min-width: 0改为min-width: 1px，即可绕过 Safari 的最小宽度保护机制 - 不要用
min-width: auto或min-width: fit-content，它们在 Safari 中行为不稳定
按钮内文字居中失效，不是 text-align 的问题
用了 flex: 1 0 0 后，text-align: center 经常失灵，原因是 flex-basis: 0 让按钮盒模型失去内容参考尺寸，text-align 找不到对齐基点。
正确做法是放弃 text-align，改用 Flex 内部居中：
- 给按钮加
display: flex、justify-content: center、align-items: center - 如果按钮含 SVG 图标，避免依赖
vertical-align: middle，它在 inline 场景下不可靠 - 移除所有包裹文字的
，直接在 button 内写文本 + 图标，减少 DOM 干扰
最易被忽略的一点：button 的默认 display 是 inline-level，一旦设了 display: flex，就必须同步处理其内部行高、字体大小和 padding 的垂直节奏，否则在小屏上会出现上下留白不一致的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
