使用 css flexbox 的 `display: flex` 结合 `justify-content: space-between` 和 `flex: 1` 可实现按钮在行内均匀分布、等宽填充，并整体撑满父容器。
要让 15 个按钮（3 行 × 5 列）在父容器中均匀分布、等宽等高、无缝撑满整个可用空间，推荐采用现代 CSS 布局方案——Flexbox，而非依赖浮动或 Bootstrap 内置栅格的间接控制。核心思路是：对每行设置为 flex 容器，并让每个按钮弹性均分主轴空间。
✅ 正确做法（推荐）：
- 将每行 <div> 设为 display: flex；
- 移除 justify-content: space-between（它会在首尾按钮间留空，导致宽度不均）；
- 改用 flex: 1 让每个按钮等比例伸展，并配合 min-width: 0 防止内容溢出破坏布局；
- 为确保三行高度一致且垂直居中，可将外层容器设为 display: flex; flex-direction: column; height: 100%（如需全高适配）。
以下是完整、健壮的实现示例：
<div class="button-grid">
<div class="row">
<button>Btn 1</button>
<button>Btn 2</button>
<button>Btn 3</button>
<button>Btn 4</button>
<button>Btn 5</button>
</div>
<div class="row">
<button>Btn 6</button>
<button>Btn 7</button>
<button>Btn 8</button>
<button>Btn 9</button>
<button>Btn 10</button>
</div>
<div class="row">
<button>Btn 11</button>
<button>Btn 12</button>
<button>Btn 13</button>
<button>Btn 14</button>
<button>Btn 15</button>
</div>
</div>.button-grid {
width: 100%;
height: 300px; /* 可按需设定高度 */
display: flex;
flex-direction: column;
gap: 10px; /* 行间距 */
}
.row {
display: flex;
flex: 1; /* 每行等高占满剩余空间 */
gap: 8px; /* 按钮间水平间距（推荐用 gap 替代 margin） */
}
.row button {
flex: 1; /* 关键：等宽伸展 */
min-width: 0; /* 防止文字过长导致 flex 失效 */
padding: 12px;
border: none;
border-radius: 4px;
background: #007bff;
color: white;
cursor: pointer;
font-size: 14px;
}
/* 可选：响应式增强 */
@media (max-width: 768px) {
.row { flex-wrap: wrap; }
.row button { flex: 0 0 calc(50% - 4px); } /* 小屏改为每行2个 */
}⚠️ 注意事项：
- 避免混用 space-between 与固定宽按钮：它仅分配空白，不控制按钮自身尺寸，易导致最后一列右偏或间隙不均；
- gap 属性兼容性良好（Chrome 46+、Firefox 48+、Safari 14.1+），比 margin 更可靠；
- 若需严格等高（尤其按钮文字长度差异大），建议统一设置 height 或使用 align-items: stretch（默认即生效）；
- 如需支持旧版浏览器（IE），可回退至 display: table-cell 方案，但灵活性与语义性显著下降。
总结：flex: 1 是实现“等分均布”的黄金属性；配合 gap 和语义化结构，即可简洁、可维护、响应式地完成 15 按钮网格布局。
