Safari 9–12需-webkit-flex因其实现旧版Flexbox草案，仅识别带-webkit-前缀的属性；必须成对添加前缀的属性包括display、flex-direction、justify-content、align-items、flex-wrap和flex；autoprefixer需配置iOS>=9或Safari>=9才生效；flex:1在Safari中失效时应拆解为-webkit-flex-grow等显式写法并确保父容器有明确高度。
为什么Safari 9–12需要-webkit-flex而其他浏览器不用
因为 Safari 在 2014–2018 年间（对应 iOS 8–12、macOS Yosemite–Mojave）只实现了旧版 Flexbox 草案规范，不识别标准的 display: flex。它只响应带 -webkit- 前缀的版本，比如 display: -webkit-flex 和 -webkit-flex-direction。Chrome 和 Firefox 当时已支持标准写法，所以你看到的“兼容写法”其实是为 Safari 单独补的补丁。
现代 Safari（13+）已完全支持标准语法，但如果你的项目仍需兼容 iOS 12 或更早系统，就必须保留前缀。
必须成对出现的前缀属性有哪些
只加 display: -webkit-flex 是不够的——所有依赖 Flex 的布局控制属性都得同步补前缀，否则 Safari 会忽略它们，回退到块级流布局，导致错位或换行异常。
-
flex-direction→-webkit-flex-direction -
justify-content→-webkit-justify-content -
align-items→-webkit-align-items -
flex-wrap→-webkit-flex-wrap -
flex（缩写）→-webkit-flex（注意：这里不是-webkit-flex-box）
示例：
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-justify-content: space-between;
justify-content: space-between;
}
autoprefixer 能不能自动搞定这件事
可以，但要配对正确目标环境。默认情况下 autoprefixer 不会为 Safari 加前缀，除非你明确声明支持 safari >= 9 或 iOS >= 9。
常见错误配置：
-
"last 2 versions"→ Safari 12 不在“最近两个版本”里（当前是 Safari 17/18），会漏掉 -
= 12.1"写成>= 12.1→ 语法错误，autoprefixer 直接跳过
推荐写法（package.json 中的 browserslist）：
["iOS >= 9", "Safari >= 9"]
这样 autoprefixer 就会稳定输出 -webkit- 版本，并把标准版放在后面覆盖——Safari 会优先用前缀版，新浏览器则用标准版。
遇到 flex: 1 在 Safari 中失效怎么办
这是最常踩的坑：flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0% 的缩写，但 Safari 9–12 对 -webkit-flex: 1 的解析有 bug，尤其当父容器没设 height 或子项含 min-width 时，会直接忽略伸缩行为。
解决方法不是硬加前缀，而是拆解写：
- 显式写
-webkit-flex-grow: 1（必须） - 确保父容器有明确高度（
height或min-height），否则 Safari 不触发 flex 容器的主轴尺寸计算 - 避免在子项上设
width或min-width，改用flex-basis控制基准尺寸
错误写法：
.item { flex: 1; width: 200px; }
正确写法：
.item {
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
}
前缀不是万能胶，Safari 的 Flex 实现有自己的一套边界逻辑——很多问题表面是缺前缀，实际是 Safari 对“无约束容器内弹性分配”的处理比标准更保守。动手前先确认父容器是否具备可计算的主轴尺寸，这点比加几个 -webkit- 更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
