按钮宽度不一致的根本原因是flex项默认flex: 0 1 auto，内容决定宽度；设flex: 1并加min-width: 0可强制等分，文字差异大时改用flex: 1 1 auto更合理，还需注意white-space、overflow、padding和box-sizing统一。
按钮宽度不一致是因为 flex 项默认不等宽
Flex 容器里多个 button 宽度不同，常见于文字长度不同、未设宽、或父容器 flex 属性没对齐。根本原因不是按钮本身，而是它们作为 flex 项时，flex 的默认行为（flex: 0 1 auto）让内容决定宽度，而非容器均分。
用 flex: 1 强制等宽最直接
给所有按钮统一设置 flex: 1，就能让它们平分剩余空间。注意这不是“固定宽度”，而是“弹性等分”——适合工具栏、操作组这类需要视觉对齐的场景。
div.button-group {
display: flex;
gap: 8px;
}
div.button-group button {
flex: 1;
min-width: 0; /* 防止文字过长撑开（尤其 Safari） */
}-
flex: 1等价于flex: 1 1 0，即允许放大缩小，基准为 0，能真正均分 - 必须加
min-width: 0，否则某些浏览器（如 Safari）会忽略flex缩小逻辑，导致文字多的按钮更宽 - 如果按钮内有图标+文字，建议用
text-overflow: ellipsis+white-space: nowrap+overflow: hidden防溢出
要保留最小内容宽度？改用 flex: 1 1 auto
当按钮文字差异大（如“取消” vs “确认并同步到所有设备”），又不想让短文本按钮被拉得太宽，可用 flex: 1 1 auto：它以内容宽度为基准，再均分剩余空间，比 flex: 1 更“尊重内容”。
button {
flex: 1 1 auto;
max-width: 200px; /* 可选：防止单个按钮过宽 */
}-
flex-basis: auto让按钮先按文字撑开，再把多余空间均摊 - 搭配
max-width能避免极端长文本破坏布局 - 注意：此时按钮宽度仍不完全相等，但视觉差异明显收敛
按钮内文字截断和对齐容易被忽略
即使 flex 值设对了，文字换行、溢出、对齐方式也会让按钮看起来“不一致”。尤其在移动端或缩放后。
立即学习“前端免费学习笔记（深入）”；
- 加
white-space: nowrap防止文字折行导致高度/宽度突变 - 加
overflow: hidden+text-overflow: ellipsis截断超长文本（需配合white-space: nowrap） - 确保所有按钮用相同
padding和box-sizing: border-box，否则内边距计算差异会放大宽度偏差 - 避免在按钮里嵌套
div或span再设 flex，这会干扰外层 flex 项的尺寸计算
实际项目中最常踩的坑是只改 flex 却忘了 min-width: 0，尤其在 Safari 下几乎必现宽度不均——这个细节没有 warning，也不报错，只能靠真机验证。
