按钮等宽显示不能只用width:100%是因为它会使每个按钮独占一行；正确方案是父容器设display:flex，子按钮设flex:1和min-width:0实现均分空间。
按钮等宽显示为什么不能只用 width: 100%
直接给按钮设 width: 100% 会让它撑满父容器，但多个按钮并排时，它们会各自占满整行，根本不会“等宽并列”。真正需要的是：**在一行内均分可用空间**。这时候 flex 是更可控的选择，百分比反而容易因边距、盒模型或父容器不确定而失效。
用 display: flex 实现等宽按钮的正确写法
核心是让父容器成为 flex 容器，子按钮自动均分主轴空间：
.btn-group {
display: flex;
}
.btn-group > button {
flex: 1; /* 等价于 flex: 1 1 0% */
min-width: 0; /* 防止内容撑宽（如长文字）破坏等分 */
}-
flex: 1表示「等比例放大收缩，基准为 0」，比flex: 1 1 auto更可靠 - 必须加
min-width: 0，否则按钮默认min-width: auto，内部文字可能强制拉宽导致不等分 - 避免给按钮设固定
width或max-width，会干扰flex分配逻辑
响应式场景下如何避免小屏按钮过窄
纯 flex: 1 在手机上可能让按钮窄到无法点击（比如 3 个按钮在 320px 屏幕上各约 100px）。需要加断点限制最小宽度：
.btn-group > button {
flex: 1;
min-width: 0;
}
@media (max-width: 480px) {
.btn-group > button {
flex: none;
width: 100%; /* 小屏改为竖排，每个占满一行 */
}
}- 不要用
min-width: 120px强制限定——这会导致 flex 不再均分，尤其在中等屏幕下布局错乱 - 更稳妥的做法是：小屏切回块级流式布局（
flex: none+width: 100%），而非硬撑等宽 - 如果必须小屏也等宽，改用
flex-basis配合媒体查询：flex: 1 1 calc(50% - 4px)（适合双按钮带间隙）
为什么不用 width: 33.333% 这类百分比
看似简单，但实际踩坑多：
立即学习“前端免费学习笔记（深入）”；
- 浏览器计算
33.333%有舍入误差，三个按钮加起来可能略超 100%，导致换行 - 没考虑
border、padding、margin，盒模型会让真实宽度溢出 - 无法响应内容变化——一个按钮文字多、一个少，视觉上就不再“等宽”
- Flex 的
flex: 1是基于剩余空间动态分配，天然规避这些精度和盒模型问题
真要用百分比，至少得配合 box-sizing: border-box 和精确间隙控制，但复杂度远超 flex 方案。
