为什么CSS Flexbox在旧版Safari中布局错乱

旧版 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。

1. display: -webkit-flex必须写在display: flex前面，两者共存
2. autoprefixer 默认不生成-webkit-flex，除非browserslist明确包含ios_saf >= 11.3或safari >= 10
3. 运行npx browserslist验证是否真命中目标版本；last 2 versions会跳过 iOS 13.3，导致真机崩塌

justify-content / align-items 等属性必须加前缀且顺序严格

旧 Safari 对justify-content这类属性同样无视标准写法，只认-webkit-justify-content，而且遇到不认识的属性就终止整条规则解析。

1. 前缀版必须写在标准版之前：-webkit-justify-content: center → justify-content: center
2. 漏掉-webkit-align-items，即使align-items: stretch写了，子项图片也会被强制拉伸变形
3. 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 不会把它拆成三个独立属性，因为规范没定义这种映射。

1. 必须手动写：-webkit-flex-grow: 1、-webkit-flex-shrink: 1、-webkit-flex-basis: 0
2. flex-basis: 0%在 Safari 中常被忽略，必须用0px（不能写0%或auto）
3. 垂直方向（flex-direction: column）需额外加min-height: 0，否则flex: 1仍不拉伸

gap 属性在 Safari ≤14.1 中压根不存在

gap不是“失效”，而是浏览器根本不解析该属性：getComputedStyle(el).gap返回空字符串或"normal"，@supports (gap: 0)检测不可靠（Safari 14.1 会误判为 true）。

1. 必须用双条件检测：@supports (grid-row-gap: 0) and (row-gap: 0)
2. 降级方案别只靠margin-right: 12px——flex-wrap启用时会导致换行错位
3. 可靠做法：overflow: hidden + 容器margin: -6px + 子项margin: 6px + 所有子项min-width: 0和box-sizing: border-box

最易被忽略的一点：嵌套 Flex 容器中，父容器若没显式宽高（比如position: absolute但缺top/bottom），旧 Safari 会整条链路拒绝启动 Flex layout 引擎——此时补再多前缀也没用，得先锚定尺寸。