flex-grow: 1 要均分宽度需配合 flex-basis: 0 和 min-width: 0，否则默认 flex-basis: auto 和 min-width: auto 会导致按内容宽度初始分配且无法收缩；多行网格应每行独立 flex 容器，避免 flex-wrap 百分比失效。
直接用 flex-grow: 1 就能实现按钮横向均匀撑满容器，但前提是父容器是 display: flex，且所有按钮是它的**直接子元素**；否则 flex-grow 不生效。
为什么 flex-grow: 1 有时不均分宽度？
常见现象：5 个按钮设了 flex-grow: 1，但宽度不一致，甚至某几个被压缩、文字换行或溢出。
-
flex-basis没重置 —— 默认为auto，会先按内容宽度占位，再分剩余空间；内容长的按钮初始宽更大，最终仍更宽 - 没加
min-width: 0—— Flex 项目默认有min-width: auto，会阻止收缩，导致窄屏下撑破容器或触发横向滚动 - 父容器没设明确宽度（如
width: 100%或max-width），或外层有float/position: absolute干扰了 Flex 上下文
正确配置 flex-grow 均分按钮的最小必要 CSS
以下代码适用于一行内多个按钮横向等宽填满：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
.btn-row {
display: flex;
}
.btn-row button {
flex-grow: 1;
flex-basis: 0; /* 关键：清空初始占位，让 grow 真正从零开始均分 */
min-width: 0; /* 关键：允许收缩，防溢出 */
border: none;
padding: 8px 0;
}-
flex-basis: 0比flex-basis: 0%更可靠，避免百分比在某些嵌套场景下计算异常 - 不要同时写
width和flex-basis，后者会覆盖前者 - 如果按钮含图标+文字，建议加
white-space: nowrap防文字意外折行破坏等宽
三行 × 五列按钮网格的完整结构要点
要让 15 个按钮（3 行 × 5 列）整体撑满容器且每行内按钮严格等宽，必须分层控制：
立即学习“前端免费学习笔记（深入）”；
- 外层容器设
display: flex; flex-direction: column; height: 100%（确保高度可继承） - 每行用独立
<div class="btn-row">包裹 5 个按钮，并对.btn-row应用上述 flex 配置 - 避免用
justify-content: space-between—— 它只调间隙，不控子项宽度，会导致首尾按钮贴边、中间按钮变宽 - 如果需响应式（如小屏变单列），优先用
flex-wrap: wrap+flex-basis: 20%替代多行结构，但注意flex-basis百分比在嵌套 flex 中可能失效，此时仍推荐每行独立 flex 容器
最易被忽略的一点：flex-grow 只在「有剩余空间」时才分配，如果按钮总内容宽度已超过容器，flex-grow 不起作用，反而 flex-shrink 开始介入 —— 所以务必配合 flex-basis: 0 和 min-width: 0，把控制权真正交还给弹性算法。
