按钮不等宽是因为浏览器默认给button设min-width: min-content，导致文字长的撑开、短的被压扁；必须显式设min-width: 0（ios可改1px）并配合flex: 1 1 0才能真正等分。
直接用 display: flex + flex: 1 就能实现等宽，但必须加 min-width: 0，否则按钮默认的 min-width: auto 会破坏均分逻辑——这是绝大多数人失败的根源。
为什么按钮不等宽？min-width: auto 在捣鬼
浏览器对 button 元素有隐式 min-width: min-content（尤其 Chrome/Safari），导致文字长的按钮强行撑开，其他按钮被压缩。这不是 Flex 失效，而是 flex-basis 被内容劫持了。
-
flex: 1等价于flex: 1 1 0%，但若子项自带最小宽度约束，0% 就失效 - 必须显式写
min-width: 0（iOS Safari 可改用min-width: 1px避免渲染 bug） - 别依赖
width: 20%这类百分比——小数舍入、边框/内边距叠加容易溢出换行
flex: 1 和 flex: 1 1 0 有区别吗？
有，而且关键。省略第三个参数时，浏览器可能回退到 flex-basis: auto，仍受内容影响；显式写 flex: 1 1 0 才真正从“0 宽度起点”开始分配空间。
- 推荐写全：
flex: 1 1 0，比flex: 1更稳 - 若需限制最小按钮宽度（比如防止小屏过窄），改用
flex: 1 1 120px，但注意这会牺牲严格等宽 - 不要混用
width和flex，后者优先级更高，前者可能被忽略或引发冲突
响应式下怎么让按钮不缩成一条线？
纯 flex: 1 在 320px 屏幕上会让 3 个按钮各约 106px，但若按钮含图标+文字，可能因换行或内容溢出崩坏布局。
- 小屏建议切回块级流：
@media (max-width: 480px) { .btn-group > button { flex: none; width: 100%; } } - 若坚持小屏也等宽，用
flex: 1 1 calc(50% - 4px)（双按钮+8px gap），但仅限固定数量场景 - 给
button加white-space: nowrap防文字折行，再配overflow: hidden; text-overflow: ellipsis
真正难的不是写对那几行 CSS，而是意识到：按钮的“内容宽度”会覆盖 flex 分配逻辑，而 min-width: 0 是唯一能关掉这个默认行为的开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
