旧版 iOS Safari（iOS 13.3 及更早）不识别标准 Flex 布局，必须双写 display 属性（-webkit-flex 在前）、所有容器/项目属性加 -webkit- 前缀且顺序严格、flex 缩写需拆解、gap 等新特性需降级。
旧版 iOS Safari（iOS 13.3 及更早、macOS ≤14）不识别 display: flex，直接跳过整条规则——不是错位，是布局彻底退化成块级流。必须手动补全 -webkit- 前缀，且顺序、写法、属性拆解全都要对，否则白写。
display 属性必须双写，且 -webkit-flex 在前
只写 display: flex，旧 Safari 当没看见；只写 display: -webkit-flex，新浏览器可能不兼容。两者都得写，且带前缀的必须放在前面：
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
-
display: -webkit-flex是旧 Safari 启用 Flex 布局的唯一开关，不是可选补丁 -
autoprefixer默认不加这个，除非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，而且必须写在标准声明之前：
.container {
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
- 如果顺序反了（标准版在前），旧 Safari 会跳过整条规则，因为遇到不认识的属性就终止解析
-
flex-wrap同理：-webkit-flex-wrap: wrap必须存在，但 iOS 8.4 以下该属性行为异常，建议用display: -webkit-box回退 -
place-items在 Safari 12–14 不稳定，拆成justify-content: center+align-items: center更可靠
flex: 1 必须拆解为三个 -webkit- 属性
旧 Safari 根本不理解 flex 缩写，flex: 1 会被完全忽略。必须显式写三个属性：
.item {
-webkit-flex-grow: 1;
-webkit-flex-shrink: 1;
-webkit-flex-basis: 0;
flex: 1;
}
-
autoprefixer不会把flex: 1拆成-webkit-flex-grow: 1——它只加前缀，不转语法 - iOS 8.4 及更早版本中，
-webkit-flex-basis: 0很关键，否则子项仍按自身内容宽度计算，无法均分剩余空间 - 若用
-webkit-box-flex: 1回退方案，父容器必须是display: -webkit-box，且子元素不能混用现代 flex 声明
gap、flex-wrap: wrap-reverse 等特性无前缀，需降级或规避
gap 在 iOS 11.2 才开始支持，旧版 Safari 完全无等效前缀方案，也无法 polyfill。
- 多行布局慎用
flex-wrap: wrap：iOS 8.1 以下行为异常，子项可能溢出容器且不换行 - 替代方案：改用
display: -webkit-box+-webkit-box-lines: multiple（仅部分支持），或用媒体查询隔离旧设备，回退到float/inline-block - 避免使用
flex-flow缩写，拆成flex-direction和flex-wrap分别加前缀，确保旧内核能逐条解析
最易被忽略的点：旧版 Safari 的样式解析是“遇到第一个不认识的属性就整条规则丢弃”，所以前缀顺序、声明位置、属性拆解缺一不可；光靠 autoprefixer 或“加个 -webkit-”远远不够。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
