用 display: flex + flex: 1 + min-width: 0 是最稳、最简、兼容性最好的等宽按钮方案；justify-content: space-between 仅分配空白，不控制子项宽度，且受默认 min-width 影响导致不均。
直接说结论：用 display: flex + flex: 1 是最稳、最简、兼容性最好的方式，不需要计算百分比，也不依赖 JS 或 Grid 的复杂语法。
为什么 justify-content: space-between 不能真正实现等宽
它只分配空白区域，不控制子元素宽度。按钮文字长短不一、内边距不同、默认 min-width 存在时，space-between 下的按钮实际宽度会严重不均，首尾按钮还容易贴边，视觉失衡。
-
space-between适合固定宽按钮 + 均匀留白，不适合“强制等宽”场景 - 浏览器会给
button默认min-width: auto，导致短文字按钮撑不开，长文字按钮又溢出 - 若没设
min-width: 0，flex: 1在某些旧版 Safari 中仍可能失效
flex: 1 必须配合 min-width: 0
这是最容易漏掉的关键点。按钮默认有最小宽度约束，flex: 1 在内容较短时无法压缩，导致整体宽度不均或换行。
- 必须显式写
min-width: 0才能让flex: 1正常生效 - 仅在按钮（子项）上设置，父容器不需要额外限制
- 如果按钮里嵌了图标或
span，也要确保这些内联元素不破坏 flex 布局，必要时加white-space: nowrap
一行多个按钮时，gap 比 margin 更干净
用 gap 控制间距，能避免首尾按钮多出的外边距问题，也省去 :first-child/:last-child 的选择器。
-
gap只作用于 flex / grid 子项之间，不会影响容器边界 - IE 不支持
gap，如需兼容 IE，改用margin-right+:nth-last-child(1)清除末位 - 若按钮高度不一致，
align-items: stretch（flex 默认值）可自动拉齐，无需额外设height
响应式断行？别用 Flexbox 硬撑
Flexbox 本身不负责换行——flex-wrap: wrap 虽然能折行，但折完就不再是“一行等宽”，而是多行各自等宽，逻辑断裂。真要响应式堆叠，应该用媒体查询切布局模式。
- 小屏下建议改用
flex-direction: column+width: 100%，而不是指望flex-wrap维持等宽语义 - 若必须单行+自适应数量（比如从 5 个缩到 3 个），优先考虑 CSS Grid 的
auto-fit+minmax()，Flexbox 在这个场景下反而更难控制 - 移动端触摸目标至少 44px 高，
padding要够，别为了“看起来窄”牺牲可点击性
真正麻烦的不是怎么写，而是按钮里混了图标、文字截断、字体加载延迟、或者用了第三方 UI 库自带的 margin/padding —— 这些都会悄悄破坏 flex: 1 的均分效果。动手前先用浏览器开发者工具检查 computed styles，确认按钮的 min-width 和 box-sizing 是否如你所想。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
