button在iOS Safari中宽度不均的根本原因是其强制min-width:min-content且忽略min-width:0，稳定解法是统一设置min-width:1px、flex:1 0 0和box-sizing:border-box。
button 元素本身不是可靠 Flex 容器
直接给 <button> 设 display: flex 在 Chrome 48 之前、Safari 9 之前、Android 4.4 WebView、iOS 8.4+ 等环境里根本无效——它被浏览器硬编码为“受限弹性容器”，align-items 和 justify-content 大概率被忽略。
典型现象包括：图标文字垂直错位、text-align: center 失效、父级 justify-content: center 完全没反应。
- 别指望 autoprefixer 补前缀能解决，这是渲染层限制，不是语法问题
- 正确做法是用内层
<span>或<div>包裹内容，再对这个内层元素设display: flex - 同时清除
<button>自身的padding和border，否则内层 flex 容器会被挤压变形
box-sizing 不显式声明会导致宽度计算混乱
<button> 在不同浏览器中默认 box-sizing 不一致：Chrome/Firefox 默认 content-box，Safari（尤其 iOS 15+）悄悄按 border-box 解析内边距，某些 Android WebView 则完全忽略声明。同一段 CSS 在不同设备上按钮实际宽度偏差可达 12px 以上。
- 必须为所有
<button>显式写box-sizing: border-box，不能依赖全局重置 - 如果还用了
flex: 1 0 0，box-sizing错误会直接导致min-width: 0失效，触发 Safari 的隐式min-width: min-content保护逻辑
iOS Safari 对 min-width: 0 的处理不可靠
iOS Safari（尤其 15+）会对 <button> 强制施加 min-width: min-content，且常忽略你写的 min-width: 0。结果就是“提交”和“导出全部”按钮宽度差异极大，不是 flex 失效，而是浏览器过度保护可点击性。
立即学习“前端免费学习笔记（深入）”；
- 实测稳定解法是改用
min-width: 1px—— 足够小不影响视觉等宽，又能绕过 Safari 的最小宽度保护机制 - 所有参与 flex 分配的
<button>都要统一加min-width: 1px，漏掉任意一个，整行都会错位 - 若用 Vue/React 封装按钮组件，确保根元素也继承该样式
flex: 1 0 0 不等于 flex: 1，尤其在 button 上
flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0 的简写，但在 <button> 上常被浏览器最小宽度策略覆盖。含文字时，flex-basis: 0 很可能被忽略，退回到内容宽度，造成“长文字按钮宽、短文字按钮窄”。
- 必须写全
flex: 1 0 0（即flex-grow: 1; flex-shrink: 0; flex-basis: 0），flex-shrink: 0才能防止压缩 -
flex: 1 0 0必须配合min-width: 0（iOS 改为1px）才能真正从零开始均分空间 - 避免
white-space: nowrap，它会加剧宽度不均——禁用换行后长文本强行撑开，短文本却被压缩，flex 分配起点彻底失衡
min-width: 1px 和 box-sizing: border-box 必须同时作用于每个参与 flex 分配的 <button>，缺一不可。漏掉任一环节，iOS 和 Android WebView 就会回归“按钮各宽各的”状态。 
