如何让一组按钮在容器内均匀分布并等比例占据全部空间

使用 css flexbox 的 `display: flex` 结合 `justify-content: space-between` 和 `flex: 1` 可实现按钮在行内均匀分布、等宽填充，并整体撑满父容器。

要让 15 个按钮（3 行 × 5 列）在父容器中均匀分布、等宽等高、无缝撑满整个可用空间，推荐采用现代 css 布局方案——Flexbox，而非依赖浮动或 bootstrap 内置栅格的间接控制。核心思路是：对每行设置为 flex 容器，并让每个按钮弹性均分主轴空间。

✅ 正确做法（推荐）：

• 将每行
  设为 display: flex；

• 移除 justify-content: space-between（它会在首尾按钮间留空，导致宽度不均）；
• 改用 flex: 1 让每个按钮等比例伸展，并配合 min-width: 0 防止内容溢出破坏布局；
• 为确保三行高度一致且垂直居中，可将外层容器设为 display: flex; flex-direction: column; height: 100%（如需全高适配）。

以下是完整、健壮的实现示例：

   
     Btn 1     Btn 2     Btn 3     Btn 4     Btn 5   
   
     Btn 6     Btn 7     Btn 8     Btn 9     Btn 10   
   
     Btn 11     Btn 12     Btn 13     Btn 14     Btn 15   
 

.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 按钮网格布局。