Safari 9–13.1因仅支持旧版Flexbox草案，必须加display: -webkit-flex及配套-webkit-前缀属性（如-webkit-flex-direction），否则Flex布局完全失效；现代Safari 14+已支持标准语法，但兼容iOS 12/13仍需保留前缀。
必须加 display: -webkit-flex，不加就完全不生效——这不是“增强兼容性”，而是 Safari 9–13.1（尤其是 iOS 13.3 及更早）的硬性要求。
为什么只写 display: flex 在 Safari 里会彻底失效
Safari 9–13.1 实现的是旧版 Flexbox 草案规范，根本不识别标准的 display: flex。它只响应带 -webkit- 前缀的属性，比如 display: -webkit-flex、-webkit-justify-content。这不是“要不要加前缀”的风格问题，而是“加了才启动 Flex 计算引擎”的底层机制问题。
- 常见错误现象：
flex-direction、justify-content全部变灰色或标为invalid，子项堆成一列、换行异常、高度塌陷 - 现代 Safari（14+）已支持标准语法，但只要目标用户包含 iOS 12/13 设备，就必须保留前缀
- 不能只加
display前缀——所有依赖 Flex 的容器级属性都得同步补全，否则 Safari 会忽略整条规则
display: -webkit-flex 必须和哪些属性成对出现
只写 display: -webkit-flex 是无效的。Safari 会识别容器是 Flex，但后续布局控制全部失效，因为它的旧草案解析器不认标准属性名。
-
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;
}
autoprefixer 能不能自动搞定这件事
可以，但前提是 browserslist 配置明确包含旧 Safari 环境。默认配置（如 "last 2 versions"）根本不会触发 Safari 前缀输出，因为当前最新是 Safari 18，它不会回溯到 Safari 12。
- 正确配置示例：
ios_saf >= 11.3或safari >= 10 - 错误配置：
>= 12.1（语法错误，autoprefixer 直接跳过） - 更隐蔽的坑：用
ios_saf >= 11但没写小数点，会导致 iOS 11.0 被忽略（实际需ios_saf >= 11.0）
为什么 flex: 1 在 Safari 里撑不满、图片被拉伸变形
这和前缀无关，而是 Safari 对 Flex 项默认行为的解析更严格：
-
flex: 1失效常因父容器无明确宽高，或子项有min-width: auto（默认值），导致 Safari 拒绝拉伸 - 图片变形通常是因为
align-items: stretch（默认值）+height: auto，Safari 会强制拉高图片填满容器高度 - 解决办法不是删前缀，而是显式设
align-items: flex-start或给图片加min-height: 0/min-width: 0
真正容易被忽略的是：这些表现差异往往和前缀共存，但根源不同。别一看到 Safari 布局错乱就只盯 -webkit-，先确认是否是 min-width、align-items 或父容器尺寸缺失这类隐性条件在作祟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
