使用 css flexbox 的 display: flex 配合 justify-content: space-between 可实现按钮水平均匀分布；但要真正“等宽且填满整个父容器”，需结合 flex: 1 或 width: 20%（5列）及清除默认间距，推荐用 flex: 1 + min-width: 0 防溢出，确保三行共15个按钮严格均分空间。
要让 15 个按钮（3 行 × 5 列）在父容器中均匀分布、等宽、无缝填满全部可用空间，仅靠 justify-content: space-between 是不够的——它只分配间隙，不强制子项等宽，且首尾按钮会紧贴边缘，导致视觉不均衡。
✅ 正确方案：对每行容器启用 Flexbox，并让每个按钮弹性占据相等宽度：
<div class="btn-row"> <button>Btn 1</button> <button>Btn 2</button> <button>Btn 3</button> <button>Btn 4</button> <button>Btn 5</button> </div> <div class="btn-row"> <button>Btn 6</button> <button>Btn 7</button> <button>Btn 8</button> <button>Btn 9</button> <button>Btn 10</button> </div> <div class="btn-row"> <button>Btn 11</button> <button>Btn 12</button> <button>Btn 13</button> <button>Btn 14</button> <button>Btn 15</button> </div>
.btn-row {
display: flex;
gap: 8px; /* 推荐替代 margin，更可控 */
margin-bottom: 10px;
}
.btn-row button {
flex: 1; /* 等分剩余空间 */
min-width: 0; /* 防止内容过长导致 flex 崩溃（关键！）*/
padding: 10px;
border: none;
border-radius: 4px;
background: #007bff;
color: white;
cursor: pointer;
font-size: 14px;
}
/* 可选：确保父容器宽度明确（如 100% 或固定值） */
body > .btn-row:first-child {
width: 100%; /* 或 max-width: 800px 等 */
}? 关键要点：
- 使用 flex: 1（等价于 flex: 1 1 0）使每个按钮按比例均分容器宽度，比 width: 20% 更健壮（自动处理 box-sizing、padding/border 影响）；
- min-width: 0 是防止按钮内文本过长时 flex 项拒绝收缩的必备声明；
- gap 替代手动 margin 控制间距，语义清晰、无外边距合并问题；
- 若需响应式适配（如小屏转为单列），可配合 @media 添加 flex-direction: column 或调整 flex-basis。
⚠️ 注意事项：
- 避免在按钮上设置 width 或 margin 与 flex: 1 冲突；
- 确保父容器有明确宽度（如 width: 100%），否则 flex 行可能收缩至内容宽度；
- 如使用 Bootstrap，建议停用其默认按钮样式干扰，或直接用 .d-flex + .gap-* 工具类替代自定义 CSS。
此方案兼顾兼容性（支持所有现代浏览器）、可维护性与扩展性，是实现均匀网格化按钮布局的首选实践。
