flex: 1 按钮不等宽是因 button 默认 min-width: min-content 阻止压缩，需显式设 min-width: 0、box-sizing: border-box，并写全 flex: 1 1 0%；三行五列布局需外层 column + 每行 flex 容器，或直接用 css grid 更可靠。
flex: 1 为什么按钮不等宽
直接给按钮加 flex: 1 很可能失效，尤其当按钮是子元素嵌套在 <div> 里，或按钮本身是替换元素（如 <code><button></button>）时。浏览器会给 <button></button> 默认设 min-width: min-content，导致它拒绝压缩——哪怕父容器已设 flex: 1，实际宽度仍由文字内容撑开。
验证方式：打开 DevTools → 选中按钮 → 查看 Computed 面板里的 min-width 和 flex-basis，大概率看到 min-width: auto 或 min-content，而 flex-basis 是 0% 却没生效。
- 必须显式重置
min-width: 0（iOS Safari 可降级为1px） -
flex: 1实际是flex: 1 1 0%，但部分旧引擎解析为0更稳妥，建议写全flex: 1 1 0 - 确保
box-sizing: border-box已全局生效，否则<button></button>的 padding/border 会额外加宽
三行五列按钮网格的 flex 实现
要让 15 个按钮排成 3 行 × 5 列、每列严格等宽并填满容器，不能只靠一层 display: flex。需分层控制：外层按行堆叠（flex-direction: column），每行自身是 display: flex 容器，按钮用 flex: 1 均分主轴空间。
关键点不在“怎么排”，而在“怎么不让它破功”：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 每行容器加
display: flex，**不要**用justify-content: space-between（会导致首尾留空、中间按钮变宽） - 每个按钮加
flex: 1 1 0+min-width: 0+box-sizing: border-box - 若按钮内有文字，加
white-space: nowrap防换行撑高；需要省略可用text-overflow: ellipsis+overflow: hidden - 外层容器设
height: 100%时，需确保父级有明确高度（如html, body { height: 100% }）
替代方案：CSS Grid 更省心
如果目标只是「等宽多栏按钮」且兼容性允许（现代浏览器全覆盖），grid 比 flex 更直接：不用管嵌套层级、不纠结 min-width 干扰、天然无视替换元素限制。
示例（5 列等宽，自动换行）：
.btn-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.btn-grid > button {
min-width: 0; /* 仍建议保留，防极端情况 */
}
-
repeat(5, 1fr)表示严格 5 等份，比flex: 1更可控 -
gap替代 margin，避免父子 margin 折叠问题 - 响应式只需改
repeat()参数，例如@media (max-width: 768px) { grid-template-columns: repeat(3, 1fr); } - Grid 对
<button></button>的min-width干扰免疫，无需额外 hack
容易被忽略的边界细节
真正卡住人的往往不是布局逻辑，而是那些默认行为：按钮自带内边距、字体继承、用户代理样式表的隐式规则。比如 Chrome 给 <button></button> 加了 border: 2px outset，Firefox 是 1px solid，这些都会影响最终宽度计算。
- 务必重置
border: 0或统一设置border: 1px solid transparent - 所有按钮统一
font-size和line-height，否则文字基线差异会导致视觉高度不一致 - 移动端点击区域过小？加
padding但必须包含在box-sizing: border-box内，否则破坏等宽 - 如果按钮含图标（
<svg></svg>），记得设width: 1em; height: 1em;并vertical-align: middle对齐文字
