应使用 flex: 1 + min-width 实现等宽按钮，配合 gap 和 box-sizing: border-box；文字超长时按需选择 white-space: normal、nowrap 或 clamp() 处理，IE11 需补 -ms-flex 前缀及兼容写法。
按钮文字长度不同导致 flex 下宽度不一致
在 display: flex 容器里放多个按钮，如果没设固定宽或对齐约束，flex 会按内容撑开——文字短的按钮窄，长的宽，视觉上错落。这不是 bug，是 flex 默认行为（flex-shrink: 1 + flex-basis: auto）。
关键不是“统一 padding 就能解决”，而是要控制主轴尺寸分配逻辑：
-
flex: 0 0 auto：禁止缩放、按内容宽，padding 一致时视觉更整齐，但依然不等宽 -
flex: 1或flex: 1 1 0：让所有按钮均分剩余空间，真正等宽 - 配合
min-width防止文字过长时挤压变形
用 flex: 1 + min-width 实现视觉与功能兼顾
单纯设 width: 100px 会破坏响应式；硬写 flex-basis: 120px 又难适配多语言文案。稳妥做法是让 flex 主动分配，再兜底最小宽度：
.btn-group {
display: flex;
gap: 8px;
}
.btn-group > button {
flex: 1;
min-width: 80px;
padding: 8px 16px;
box-sizing: border-box;
}
注意点：
立即学习“前端免费学习笔记（深入）”；
-
gap比margin更干净，避免首尾多出空白 -
box-sizing: border-box确保padding不额外增加宽度 - 若按钮需保持“文字居中+左右留白”感，
padding值必须一致，否则基线对不齐
文字超长时按钮换行还是溢出？看场景选 white-space
等宽按钮里塞进“导出全部用户数据并生成 PDF 报告”这种文案，要么折行破坏高度一致性，要么溢出遮挡。没有银弹，得按交互意图选：
