用 display: grid 最省事，因其能绕过按钮作为替换元素的 min-width: min-content 限制，实现稳定等宽布局；flex 容易失效，需显式设 min-width: 0 和 flex: 1 1 0 才可靠。
直接用 display: grid 最省事，flex 容易因 min-width: min-content 失效——尤其在按钮上。
为什么 flex: 1 在按钮上经常不生效
浏览器给 <button></button> 默认设了 min-width: min-content，它会强行撑开，无视 flex: 1 的压缩意图。DevTools 的 Computed 面板里能看到 min-width: auto 或 min-content，而 flex-basis 显示为 0% 却没起作用。
必须显式覆盖：
-
min-width: 0（iOS Safari 可降级为1px） - 写全
flex: 1 1 0，别只写flex: 1 - 确保
box-sizing: border-box已全局生效，否则 padding/border 会额外加宽 - 按钮内文字加
white-space: nowrap，防换行导致高度突变
grid-template-columns: repeat(5, 1fr) 实现三行五列等宽
比 flex 分层控制更可靠，不用操心嵌套、替换元素限制或 min-width 干扰。
示例 CSS：
.btn-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.btn-grid > button {
min-width: 0;
}
repeat(5, 1fr) 表示严格五等份；gap 替代 margin，避免外边距折叠；响应式只需改 repeat() 参数，比如 @media (max-width: 768px) { grid-template-columns: repeat(3, 1fr); }。
要让按钮宽度统一为最长内容的宽度，用 inline-grid
不是均分容器，而是所有按钮拉伸到「最宽那个」的固有宽度——适合文案长度差异大、又需视觉对齐的场景。
关键组合：
-
display: inline-grid（不能是grid，否则独占整行） grid-auto-flow: columngrid-auto-columns: 1fr- 按钮加
white-space: nowrap，必要时补min-width: fit-content
gap 控制间距比 margin 更稳，且不参与宽度计算。
真正容易被忽略的是：按钮是替换元素，CSS 对它的默认约束比普通 div 强得多；Grid 方案看似多一行声明，实则绕开了 flex 下一堆隐式规则和兼容性补丁。如果目标只是等宽排列，别在 flex 上反复调参。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
