按钮不等宽是因为父容器未设display: flex、按钮默认margin挤占空间、min-width: auto阻止收缩或存在width/flex-basis非零值；用flex: 1（即flex-grow: 1; flex-shrink: 1; flex-basis: 0%）并配合min-width: 0、margin: 0和white-space: nowrap才能实现严格等宽。
flex-grow: 1 为什么按钮还是不等宽？
直接给 button 加 flex-grow: 1 常常没效果，不是 flex 写错了，而是父容器和子项本身在“拖后腿”：
- 父容器没设
display: flex——flex-grow只在 flex 容器里生效 - 按钮自带 UA 默认 margin（比如 Chrome 给
button设了margin: 0.3em），挤占空间导致 flex 计算失准 - 按钮内文字过长或含图标时，默认
min-width: auto会阻止收缩，让flex-grow失效 - 子项写了
width或flex-basis非零值，覆盖了flex-grow的分配逻辑
用 flex: 1 实现严格等宽的最小可行配置
flex: 1 是最简写法，但它背后是 flex-grow: 1; flex-shrink: 1; flex-basis: 0% —— 关键就在这个 0%。它让所有按钮从“零宽度”开始均分剩余空间，彻底无视内容长度。
实操必须同时处理三件事：
- 父容器加
display: flex和flex-wrap: nowrap（防意外折行） - 每个按钮设
flex: 1+min-width: 0（强制允许收缩） - 清除默认边距：
margin: 0，必要时加white-space: nowrap防文字换行撑宽
示例：
立即学习“前端免费学习笔记（深入）”；
.btn-group {
display: flex;
flex-wrap: nowrap;
}
.btn-group button {
flex: 1;
min-width: 0;
margin: 0;
white-space: nowrap;
}
flex: 1 和 flex: auto 到底差在哪？
别只看名字像，它们对“起点宽度”的定义完全不同，直接影响是否溢出或不均：
-
flex: 1→flex-basis: 0%：所有按钮从 0 开始拉伸，严格等宽，适合按钮、卡片等 UI 控件 -
flex: auto→flex-basis: auto：先按文字/图标自身宽度占位，再分剩余空间，长文本按钮会明显更宽 - 如果按钮已设
width: 120px，flex: 1会被忽略——要么删掉width，要么显式写flex-basis: 0
多行按钮组怎么保持每行都等宽？
单行用 flex: 1 没问题，但一旦加 flex-wrap: wrap，flex: 1 就只在当前行内生效，不同行之间宽度可能不一致（尤其当每行按钮数不同时）。
解决方法很明确：
- 不要让整个按钮组容器
flex-wrap，而是把每行单独包一层div，每行都设为display: flex - 每行内的按钮统一用
flex: 1，这样每行都独立均分该行宽度 - 避免用
justify-content: space-between来“模拟等宽”——它只调间隙，不控宽度，首尾按钮会贴边，视觉上就不等
真正容易被忽略的是：flex-basis: 0 这个隐含前提。只要按钮内容有不可压缩的最小尺寸（比如固定图标+文字组合），又没设 min-width: 0，flex: 1 就会在某一行悄悄失效。
