是，旧版safari（ios 13.3及更早、macos ≤14）完全不识别display: flex，必须同时声明display: -webkit-flex（在前）和display: flex，并为justify-content、align-items等属性添加-webkit-前缀且顺序正确。
display: flex 在旧版 Safari 里完全不生效？必须写两遍
旧版 Safari（iOS 13.3 及更早、macOS ≤14）压根不认识 display: flex，直接跳过整条声明——不是错位，是布局彻底退化成块级流。只写 flex 或 flex-col 类，生成的 CSS 没有前缀，就等于没写。
-
display: -webkit-flex必须和display: flex并存，且前缀版必须写在前面 - autoprefixer 默认不加这个，除非
.browserslistrc明确包含ios_saf >= 11.3或safari >= 10 - 运行
npx browserslist验证输出里是否真有safari 12或ios_saf 12.0-12.4，last 2 versions会跳过
justify-content / align-items 等属性顺序写反就失效
旧版 Safari 对 justify-content 这类属性同样无视标准写法，只认 -webkit-justify-content，而且必须写在标准声明之前。顺序反了（标准版在前），它会直接跳过整条规则。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
-webkit-justify-content: center必须出现在justify-content: center前面 -
-webkit-align-items、-webkit-flex-wrap同理，缺一不可 -
place-items在 Safari 12–14 不稳定，拆成justify-items-center+align-items-center更可靠
flex: 1 在 iOS 8.4 及更早根本无效
autoprefixer 不会把 flex: 1 拆成三个 -webkit- 属性，而旧 Safari 根本不理解 flex 缩写。写了 flex: 1 却不生效？大概率是 iOS 8.4 或更早版本。
- 必须显式写三行：
-webkit-flex-grow: 1、-webkit-flex-shrink: 1、-webkit-flex-basis: 0 - 父容器需有明确高度，否则子项拉伸仍可能失败
- Flex 子项撑不满高度？大概率是
min-width: auto阻断拉伸，加min-w-0或手写[min-width:0]
滚动条、渐变、var() 这些不是“加前缀就能好”
iOS 12 Safari 会静默丢弃整条不认识的 CSS 声明：rgba() 渐变渲染成黑块、var(--color) 整行被忽略、aspect-ratio 直接不解析。兼容核心是前置 fallback + 控制解析顺序。
- 渐变里的透明色统一换成
transparent或 8 位 hex（如#0000004D），并双写：-webkit-linear-gradient()在前，linear-gradient()在后 -
var(--primary, #333)在 iOS 12 里后备值不生效，得写两行：color: #333换行再写color: var(--primary) - iOS Safari 完全忽略
::-webkit-scrollbar样式，别为它写任何 CSS；scrollbar-width在 Firefox 里只对设了height和overflow-y的容器生效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
