如何通过设置flex-basis统一CSS Flex布局中Button宽度不一致问题？

本文共计892个文字，预计阅读时间需要4分钟。

直接写+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 的内容（尤其文字）会触发“收缩抵抗”，造成宽度参差。