应使用 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 报告”这种文案，要么折行破坏高度一致性，要么溢出遮挡。没有银弹，得按交互意图选：
- 允许折行：
white-space: normal+text-align: center+ 调高min-height - 强制单行截断：
white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 响应式截断：用
clamp()控制字号，如font-size: clamp(12px, 4vw, 16px)
别忘了给截断文本加 title 属性，鼠标悬停可读全称。
IE11 兼容时 flex: 1 的坑必须手动补前缀
IE11 对 flex 缩写支持差，flex: 1 会被忽略，退化成内容宽。必须显式写出老式三属性：
.btn-group > button {
-ms-flex: 1;
flex: 1;
-ms-flex-min-width: 80px;
min-width: 80px;
padding: 8px 16px;
box-sizing: border-box;
}
另外两个常见漏点：
- IE11 不支持
gap，得用margin-right模拟，且最后一个按钮要margin-right: 0 -
text-overflow: ellipsis在 IE11 中必须配合width和overflow: hidden，仅flex不够
真要兼容 IE11，建议用 PostCSS 自动补全，而不是手写两套规则。
