旧版 safari（≤13.1）不解析 display: flex，须前置 display: -webkit-flex 并为所有 flex 属性加 -webkit- 前缀；flex: 1 需写为 flex: 1 1 0px 和 -webkit-flex: 1 1 0px，且补 min-height: 0；gap 不被支持，需用 margin 模拟，并注意选择器兼容性。

display: flex 在老版本 Safari（≤13.1，对应 iOS ≤13.3）里根本不会被解析，不是“表现不一致”，是压根没启动 Flex 布局引擎。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

---

display: -webkit-flex 必须写，且顺序不能错

• Safari 9–13.1 实现的是 2012 年 Flexbox 草案，只认 display: -webkit-flex；写了 display: flex 但没加前缀，整个容器退化为普通块级元素
• display: -webkit-flex 必须放在 display: flex 前面，否则旧内核直接跳过整条规则
• 所有配套属性也得一一加前缀：
  • -webkit-flex-direction 替代 flex-direction
  • -webkit-justify-content 替代 justify-content
  • -webkit-align-items 替代 align-items
  • -webkit-flex-wrap 替代 flex-wrap

---

flex: 1 在 Safari 9–12 中等于 flex: 1 1 auto，不是 1 1 0

• 这导致子项在垂直方向上高度坍缩为 0，尤其常见于卡片、全高布局
• 必须显式写三值：flex: 1 1 0px + -webkit-flex: 1 1 0px
• 还要补上 min-height: 0（垂直主轴）或 min-width: 0（水平主轴），否则 Safari 默认的 min-height: auto 会锁死收缩
• flex-basis: 0% 不行——Safari 会直接忽略，只能用 0px

---

gap 在 Safari ≤14.1 中是“语法不存在”，不是“不兼容”

• DevTools 里 gap 显示灰色带删除线，或 getComputedStyle(el).gap 返回空字符串，就确认它没被解析
• @supports (gap: 0) 在 Safari 14.1 下会误判为 true，但实际仍跳过声明，降级逻辑失效
• 正确检测方式是双条件：@supports (grid-row-gap: 0) and (row-gap: 0)
• 模拟 gap: 16px 必须四要素齐备：
  • 容器加 margin-left: -8px; margin-right: -8px; overflow: hidden
  • 子项加 margin-left: 8px; margin-right: 8px; min-width: 0; box-sizing: border-box
  • 清首项 margin 别用 :not(:first-child)（旧 Safari 不支持），改用 :nth-child(n+2)

---

关键点容易被忽略：不是所有旧 Safari 都能靠 autoprefixer 自动修复。它默认不拆解 flex: 1 成 -webkit-flex-grow 等单属性，iOS 8.4 及更早版本甚至完全不认识 -webkit-flex: 1 ——必须手动写全三个前缀属性。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！