通过 flexbox 的 `display: flex` 与 `justify-content: space-between` 配合子项宽度控制，可让多行按钮在父容器内水平均匀分布并等比例占据全部可用空间。
要让 15 个按钮（3 行 × 5 列）在父容器中完全铺满、均匀分布、尺寸一致，最简洁可靠的方式是使用现代 CSS Flexbox 布局，而非依赖 Bootstrap 的栅格系统或浮动/inline-block 等传统方案。
✅ 推荐实现方案（纯 CSS Flexbox）
为每行容器设置 display: flex，并结合 flex: 1 或显式宽度控制，确保 5 个按钮等分该行宽度；同时使用 justify-content: space-between 可在保留间隙的前提下实现视觉均衡（但注意：若需真正等宽+无缝隙填充，应优先使用 flex: 1）：
.button-row {
display: flex;
width: 100%;
margin-bottom: 10px;
}
.button-row button {
flex: 1; /* 每个按钮均分剩余空间 */
margin: 0 2px; /* 可选：添加微小间隔，避免紧贴 */
border: none;
padding: 10px;
background-color: #007bff;
color: white;
cursor: pointer;
}
/* 移除首尾按钮的外边距（可选精细化控制） */
.button-row button:first-child { margin-left: 0; }
.button-row button:last-child { margin-right: 0; }对应 HTML 结构如下：
<div class="button-row"> <button>B1</button> <button>B2</button> <button>B3</button> <button>B4</button> <button>B5</button> </div> <div class="button-row"> <button>B6</button> <button>B7</button> <button>B8</button> <button>B9</button> <button>B10</button> </div> <div class="button-row"> <button>B11</button> <button>B12</button> <button>B13</button> <button>B14</button> <button>B15</button> </div>
⚠️ 注意事项
- 避免 space-between 单独使用：原答案中的 justify-content: space-between 在只有 5 个子元素时，会在首尾按钮与容器边缘留出较大空白，无法实现“按钮填满整行”的目标；flex: 1 才是实现等宽填充的关键。
- 响应式友好：该方案天然适配响应式设计——父容器宽度变化时，按钮会自动重算宽度，无需媒体查询。
- 兼容性：Flexbox 在所有现代浏览器（Chrome 29+, Firefox 28+, Safari 9+, Edge 12+）中完全支持；如需支持 IE10/11，可添加 -ms-flex 前缀，但需注意其 flex 行为存在细微差异。
✅ 总结
用 display: flex + flex: 1 是实现按钮组等宽、满行、自适应的最优解。它语义清晰、代码精简、维护性强，且比 CSS Grid（虽更强大）在单行布局中更轻量。摒弃对 Bootstrap 栅格的依赖，拥抱原生 Flexbox，能让布局更可控、性能更优、结构更语义化。
立即学习“前端免费学习笔记（深入）”；
