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

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

# 会在  # 可选  # safari  # 设置为  # 要让  # 可将  # 而非  # 如需  # 浏览器  # css  # 设为  # 行间  # chrome  # display  # table  # firefox  # bootstrap  # column  # 等高  # flex  # margin  # 垂直居中 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】