旧版 Safari（≤14.1）完全忽略 display: flex，须用 display: -webkit-flex 并配全前缀属性；flex 相关语法、gap 等均需降级处理，且嵌套时父容器必须显式宽高。
旧版 Safari（≤14.1，特别是 iOS 13.3 及更早、macOS ≤14）根本“看不见”display: flex，不是渲染错乱，是布局直接退化成块级流——写了等于没写。必须用display: -webkit-flex启动 Flex 引擎，且所有关键属性都要配前缀、顺序不能错。
display: flex 在 Safari ≤14.1 中被完全忽略
这不是兼容性补丁问题，是语法层面不匹配：Safari 9–13.1 实现的是旧版 Flexbox 草案，只识别display: -webkit-flex。只写display: flex，整个容器就按普通div渲染，子项堆成一列，justify-content在 DevTools 里标为 invalid。
-
display: -webkit-flex必须写在display: flex前面，两者共存 - autoprefixer 默认不生成
-webkit-flex，除非browserslist明确包含ios_saf >= 11.3或safari >= 10 - 运行
npx browserslist验证是否真命中目标版本；last 2 versions会跳过 iOS 13.3，导致真机崩塌
justify-content / align-items 等属性必须加前缀且顺序严格
旧 Safari 对justify-content这类属性同样无视标准写法，只认-webkit-justify-content，而且遇到不认识的属性就终止整条规则解析。
- 前缀版必须写在标准版之前：
-webkit-justify-content: center→justify-content: center - 漏掉
-webkit-align-items，即使align-items: stretch写了，子项图片也会被强制拉伸变形 -
flex-wrap: wrap在 iOS 8.4 以下行为异常，建议搭配-webkit-flex-wrap: wrap，或对老设备降级为display: -webkit-box
flex: 1 在 iOS 8.4 及更早版本中完全无效
这些版本的 WebKit 内核未实现 Flexbox Level 1 完整语法，flex: 1会被直接跳过，布局退化为块级堆叠。autoprefixer 不会把它拆成三个独立属性，因为规范没定义这种映射。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须手动写：
-webkit-flex-grow: 1、-webkit-flex-shrink: 1、-webkit-flex-basis: 0 -
flex-basis: 0%在 Safari 中常被忽略，必须用0px（不能写0%或auto） - 垂直方向（
flex-direction: column）需额外加min-height: 0，否则flex: 1仍不拉伸
gap 属性在 Safari ≤14.1 中压根不存在
gap不是“失效”，而是浏览器根本不解析该属性：getComputedStyle(el).gap返回空字符串或"normal"，@supports (gap: 0)检测不可靠（Safari 14.1 会误判为 true）。
- 必须用双条件检测：
@supports (grid-row-gap: 0) and (row-gap: 0) - 降级方案别只靠
margin-right: 12px——flex-wrap启用时会导致换行错位 - 可靠做法：
overflow: hidden+ 容器margin: -6px+ 子项margin: 6px+ 所有子项min-width: 0和box-sizing: border-box
最易被忽略的一点：嵌套 Flex 容器中，父容器若没显式宽高（比如position: absolute但缺top/bottom），旧 Safari 会整条链路拒绝启动 Flex layout 引擎——此时补再多前缀也没用，得先锚定尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
