按钮容器必须用 display: flex 并设子元素 flex: 1 实现等比缩放，配合 box-sizing: border-box、重置 margin/padding；窄屏改 flex-direction: column；避免 width 百分比、Grid 及文字长度导致的视觉偏差。
按钮容器必须用 flex 布局
直接给多个 <button> 设置 width: 20% 不会等比缩放，因为浏览器默认按内容撑开宽度，且父容器未定义弹性行为。必须用 display: flex 让子元素参与分配空间。
常见错误是只加 flex 但漏掉关键属性：
-
flex-wrap: nowrap（防止换行破坏比例） -
justify-content: space-between或space-around（影响间隙，但不改变等比逻辑） - 每个按钮必须设
flex: 1，而不是靠百分比——否则在不同屏幕下因四舍五入或边框/内边距干扰导致实际宽度不均
避免 margin/padding 破坏等比计算
当按钮有 padding 或外边距时，flex: 1 分配的是剩余空间，但 padding 会挤占内容区，视觉上“看起来”不等宽。尤其在移动端，小尺寸下 1px 差异更明显。
解决办法统一用 box-sizing: border-box，并显式重置所有干扰项：
立即学习“前端免费学习笔记（深入）”；
.btn-group {
display: flex;
}
.btn-group button {
flex: 1;
box-sizing: border-box;
margin: 0;
padding: 8px 12px;
border: 1px solid #ccc;
}
响应式断点需重置 flex 方向
在窄屏（如手机）下，4 个等宽按钮会挤成一行超小文字，体验差。不能只靠媒体查询改 width，而要改布局逻辑：
- 小于 480px 时，设
flex-direction: column，让按钮垂直堆叠 - 若仍需横向，可改用
flex: none+ 固定宽度（如width: 48px），但此时已不是“等比”，而是“等宽” - 注意：Chrome Android 对
flex: 1在column下的处理略有差异，建议加min-width: 0防止溢出
不要用 CSS Grid 替代 flex 实现等比按钮
虽然 grid-template-columns: repeat(4, 1fr) 看似更直观，但它在动态增删按钮时需同步改 repeat() 参数，维护成本高；而 flex 的 flex: 1 天然适配任意数量子元素。
另外，旧版 Safari（iOS 12 及更早）对 fr 单位支持不稳定，flex: 1 兼容性更好。
真正容易被忽略的是：按钮文字长度差异大时，即使等比分配，视觉重心也会偏移——这时候得靠 text-align: center 和统一 line-height 来对齐，而不是指望 flex 自动居中内容。
