<p>Safari 旧版本需为 Flex 属性添加 -webkit- 前缀以确保兼容，如 display、flex-direction、justify-content 等，并注意 flex-basis 的不稳定问题及测试降级策略。</p>
在 Safari 中，某些 Flex 布局表现异常（比如子项不换行、对齐失效、flex-grow 不生效等），往往不是因为写法错误，而是 Safari 旧版本（尤其是 iOS 12 及更早、macOS Mojave 及之前）对 CSS Flexbox 的实现依赖较老的 WebKit 规范，需手动添加 -webkit- 前缀才能正确识别。
哪些 Flex 属性需要加 -webkit- 前缀
以下常用 Flex 相关声明，在 Safari 旧版中建议同时写标准版和带前缀版（顺序建议：先写带前缀的，再写标准版，确保兼容性）：
display: -webkit-flex; display: flex;-
flex-direction: -webkit-row; flex-direction: row;（同理适用于 column / row-reverse 等） -
justify-content: -webkit-center; justify-content: center;（注意：Safari 旧版中-webkit-center才有效，center可能被忽略） align-items: -webkit-center; align-items: center;flex-wrap: -webkit-wrap; flex-wrap: wrap;-
flex: -webkit-flex: 1; flex: 1;（或分别写-webkit-flex-grow/flex-grow等）
避免只靠 Autoprefixer 自动补全
Autoprefixer 默认基于 Browserslist 配置决定是否加前缀。若你的目标浏览器包含 iOS ios >= 12, safari >= 12）。否则 Autoprefixer 可能跳过关键前缀，导致 Safari 渲染异常。
可检查生成后的 CSS 是否存在 -webkit- 版本；若无，调整 browserslist 并重新构建。
立即学习“前端免费学习笔记（深入）”；
特别注意 Safari 对 flex-basis 的处理
Safari 旧版（尤其 iOS 11–12）对 flex-basis: auto 和 flex: 0 0 auto 解析不稳定，容易导致宽度计算错误或内容溢出。稳妥做法是：
- 显式设置
min-width: 0或max-width: 100%防止子项撑开容器 - 用
flex: 0 0 fit-content替代flex: 0 0 auto（配合-webkit-flex: 0 0 -webkit-fit-content） - 必要时改用
width+flex-shrink组合替代flex-basis
测试与降级建议
仅靠加前缀不一定解决所有问题。建议：
- 用 Safari 开发者工具（Develop → Enter Responsive Design Mode）模拟 iOS 设备，实时调试
- 对关键布局（如导航栏、卡片列表）增加简单视觉断言（如背景色+边框），快速定位是否 flex 生效
- 若仍异常，可考虑优雅降级：对 Safari 旧版用
@supports not (display: flex)回退到 float 或 inline-block 布局
基本上就这些。加前缀不是“多此一举”，而是 Safari 旧引擎的实际需求。保持前缀+标准双写、配好 browserslist、重点测 flex-basis 行为，就能覆盖绝大多数 Safari Flex 兼容问题。
