Safari（尤其iOS 15+）中flex: 1不拉伸、不等宽，因其对button等元素强制施加不可覆盖的min-width: min-content，需统一设flex: 1 0 0、min-width: 1px、box-sizing: border-box并用display: flex居中文字。
因为 Safari（尤其 iOS 15+）对 flex: 1 的子项默认施加了不可覆盖的 min-width: min-content，而 Chrome 默认允许用 min-width: 0 显式打破它——不是写法错，是浏览器对“最小可压缩宽度”的保护策略不同。
为什么 Safari 里 flex: 1 不拉伸、不等宽
Firefox 和 Safari 都更严格地执行 CSS Flex 规范中关于 min-width: auto 的初始值逻辑，但 Safari 进一步强化了保护：对 <button>、<input>、<img> 等元素，会悄悄忽略你写的 min-width: 0，坚持按文字或内容撑开。Chrome 则通常让 min-width: 0 生效，所以看起来“正常”。
常见现象包括：
- 同一行三个按钮，“提交”“取消”“导出全部”，Safari 下最后一个明显更宽
- Vue/React 动态渲染后，某张卡片突然变宽，Computed 样式里
min-width显示为124px而非0 - 加了
white-space: nowrap后宽度差异反而更大
flex: 1 0 0 + min-width: 1px 是 Safari 的稳定解法
别只写 flex: 1，它等价于 flex: 1 1 0，其中 flex-shrink: 1 允许压缩，但 Safari 会顶住不缩。必须显式关闭收缩，并绕过其最小宽度保护。
立即学习“前端免费学习笔记（深入）”；
对所有参与分配的子项（尤其是 <button>），统一设置：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
flex: 1 0 0（即flex-grow: 1、flex-shrink: 0、flex-basis: 0） -
min-width: 1px（iOS Safari 必须用1px，0常被忽略） -
box-sizing: border-box（否则 padding/border 会额外加宽，Safari 对此更敏感）
漏掉任意一个，整行都会因基准不一致而错位。
gap 替代 margin 才能避免换行和错位
用 margin 控制卡片/按钮间距，在 flex-wrap: wrap 下极易出问题：每行首尾多出半份 margin，导致视觉偏移，且响应式断点切换后 :nth-child(3n) 立刻失效。
正确做法是：
- 父容器设
gap: 16px（支持 Chrome 84+/Firefox 63+/Safari 14.1+） - 子项去掉所有
margin，包括margin-left、margin-right - 若需兼容 Safari 14.0 或更早，改用
grid：display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px
按钮内文字居中失效？不是 text-align 的问题
当给 <button> 加了 flex: 1 0 0 和 min-width: 1px 后，文字可能贴左或上下偏移——这不是 text-align 或 line-height 没设好，而是按钮默认是 inline-level，内部行盒未被 flex 容器接管。
解决方法很简单：
- 给按钮加
display: flex，再用justify-content: center和align-items: center - 或者保留
display: inline-block，但确保vertical-align: middle与父容器基线对齐 - 避免同时设
padding和height，Safari 可能因 box-sizing 解析差异导致高度计算冲突
真正容易被忽略的是：这些样式必须作用在按钮的**直接父 flex 容器子项**上，而不是封装组件的外层 div —— Vue/React 中常因 scoped style 或 shadow DOM 导致规则未穿透。
