按钮等宽的真正起点是flex: 1 0 0，它从零宽度均分剩余空间，但必须配合min-width: 0（ios safari建议用1px）、display: flex父容器、box-sizing: border-box及gap控制间距。
flex: 1 0 0 是按钮等宽的真正起点
文本长度差异大时，width: 33.33% 或 inline-block 布局会立刻暴露问题：小文字按钮被压扁、长文字按钮撑破容器、iOS Safari 渲染舍入误差导致横向滚动。而 flex: 1 0 0 的本质是「从零宽度开始，均分剩余空间」，它绕开了内容尺寸干扰，让每个按钮的基线一致。
但光写 flex: 1 不行——它是 flex: 1 1 0 的简写，第二个参数 flex-shrink: 1 允许压缩，而浏览器给 button 隐式设了 min-width: min-content，文字一长就“顶住不缩”，一短就被压垮，结果反而更不均。
- 必须显式写成
flex: 1 0 0，关闭收缩行为 - 必须加
min-width: 0（iOS Safari 下建议用min-width: 1px绕过保护性渲染） - 必须确保父容器有
display: flex且未被width或max-width截断 - 子按钮不能自己设
width、min-width或其他flex值，否则覆盖父级规则
gap 属性比 margin 更可靠地控制间距
按钮文字长短不一，若靠 margin-right 控制间隔，容易因最后一个按钮多出空白、或换行后间隙错位。而 gap 是容器级属性，只作用于 flex 项之间，首尾不额外留空，也不受子项自身 margin 干扰。
兼容性方面，gap 在现代移动端已无压力（Chrome 84+/Firefox 63+/Safari 14.1+），仅需对旧版 Android WebView 补 row-gap/column-gap 或回退到 :not(:last-child) + margin-right。
- 推荐直接用
gap: 8px，简洁且语义清晰 - 避免给每个按钮单独设
margin，易与外部布局冲突 - 若需垂直+水平不同间距，用
row-gap: 4px和column-gap: 12px
align-items: stretch 让按钮自动等高
文字行数不同（比如“提交” vs “导出全部数据并同步至云端”）会导致按钮高度不一致，视觉割裂。此时 align-items: stretch（flex 默认值）能让所有按钮拉满容器高度，前提是父容器没有固定 height。
但要注意：如果按钮内含图标+文字，且未设 box-sizing: border-box，不同浏览器对 padding 和边框的解析差异会让实际高度偏差明显。
- 显式声明
box-sizing: border-box，统一内边距计算逻辑 - 慎用
align-items: center—— 它会让短文本按钮“悬空”，破坏底部对齐习惯 - 如需保留内容高度而非拉伸，改用
align-items: flex-start+ 统一padding
移动端 Safari 对 button 的特殊处理必须绕过
iOS Safari（尤其 15+）在 viewport 缩放、动态字体调整或重排时，会悄悄把 button 的 min-width 重置为内容宽度，导致 flex-basis: 0 形同虚设。这不是 bug，是它的“保护性渲染”机制。
稳定解法不是硬刚，而是适配：
- 按钮元素统一用
<button></button>，别用<input type="button">—— 后者在部分 WebView 中根本不响应 flex - 加前缀兼容：父容器补
display: -webkit-flex和display: -ms-flexbox - 测试时禁用缩放：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> - 文字超长兜底：加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap，但注意这会破坏换行自适应
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
