仅 Safari 9–13.1（iOS 9–13.3）必须写 display: -webkit-flex 并配齐所有前缀属性，否则 Flex 布局完全不启动；Safari 14+ 已彻底忽略前缀，写了也无效。
旧版 Safari（iOS 13.3 / Safari 13.1 及更早）不识别 display: flex，必须写 display: -webkit-flex 并配齐所有前缀属性，否则 Flex 布局完全不启动；现代 Safari（14+）已彻底忽略这些前缀，写了也白写。
哪些 Safari 版本必须写 display: -webkit-flex
仅 Safari 9–13.1（对应 iOS 9–13.3）需要。这不是“兼容增强”，是硬性门槛：没这个声明，Flex 计算引擎根本不运行，justify-content、flex-direction 全部标为 invalid，子项堆成一列或高度塌陷。
-
display: -webkit-flex必须写在display: flex前面，顺序反了整条规则被跳过 - 只加
display前缀没用，flex-direction、justify-content、align-items、flex-wrap、flex（不是-webkit-flex-box）都得一一补全 - Safari 14+ 已移除对
-webkit-flex的支持，开发者工具里根本看不到该声明，也不报错
flex: 1 在 Safari 中撑不满、图片拉伸变形怎么办
这和前缀无关，是 Safari 对弹性项默认行为解析更严格导致的。常见于父容器无明确宽高、或子项触发了 min-width: auto（默认值）保护机制。
- 显式加
min-width: 0或max-width: 100%，防止内容宽度干扰弹性分配 - 避免只写
flex: 1，改用flex: 1 1 0或拆解为flex-grow: 1; flex-shrink: 1; flex-basis: 0 - 若子项是图片，加
width: 100%; height: auto防止拉伸，再配合object-fit: cover控制裁剪
为什么 button 上直接写 display: flex 总是失效
<button> 在 Safari 9–13.1 和多数 Android WebView 中是“受限弹性容器”——即使加了前缀，align-items 和 justify-content 也会被忽略，导致图标文字垂直错位、text-align: center 失效。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 不要在
button上直接设display: flex，改用内层<span>或<div>包裹内容并设 Flex - 给
button清掉默认padding和border，否则内层 Flex 容器会被挤压 - 必须显式写
box-sizing: border-box+min-width: 0，否则 Safari（尤其 iOS 15+）会按不同规则计算宽度，偏差可达 12px
autoprefixer 能不能自动补全这些前缀
能，但默认配置（如 "last 2 versions"）完全不会触发 Safari 旧版前缀输出，因为当前最新是 Safari 18，它不会回溯到 Safari 12。
- 正确配置示例：
ios_saf >= 11.3或safari >= 10（注意小数点，ios_saf >= 11会漏掉 iOS 11.0） - 错误配置：
>= 12.1是语法错误，autoprefixer 直接跳过 - 生成后务必检查 CSS 文件中是否真有
-webkit-flex等声明，别依赖“应该有”
最易被忽略的一点：Safari 旧版对 flex-basis 解析极不稳定，flex: 0 0 auto 在 iOS 11–12 中大概率失效，应优先用 flex: 0 0 fit-content 或直接改用 width + flex-shrink 组合。
