必须显式写 -webkit-flex-direction 且禁用 flex-flow 简写，因 safari ≤13.1 不识别标准 flex-direction，ios 8–9 完全忽略 flex-flow；column-reverse 需配合 -webkit-box-orient 和 -webkit-box-direction；父容器须设确定高度并补 min-height: 0。
必须显式写 -webkit-flex-direction，且不能依赖 flex-flow 简写。Safari ≤13.1（对应 iOS 13.3 及更早）压根不识别标准 flex-direction，写了等于没写——DevTools 里该属性会标灰或显示 invalid，子项仍按默认 row 排列。
为什么 flex-flow: column wrap 在 iOS 8–9 中完全失效？
旧版 WebKit 对 flex-flow 的解析是断裂的：它只认单属性，遇到组合值直接跳过整条规则。结果就是容器退化为普通块级元素，column 和 wrap 全部丢失。
- 改用拆解写法：
-webkit-flex-direction: column;+flex-direction: column;+-webkit-flex-wrap: wrap;+flex-wrap: wrap; -
flex-flow在 iOS 8.4 及更早版本中被彻底忽略，autoprefixer 即使加了前缀也救不回来 - 若只写
-webkit-flex-flow: column wrap，iOS 9 以下可能部分生效，但行为不稳定，建议彻底弃用
-webkit-flex-direction 的取值映射要严格对应
旧草案规范对值名有差异，比如 column-reverse 在 Safari 9–12 中需配合 -webkit-box-orient 和 -webkit-box-direction 才能生效，单靠前缀属性不够。
-
row/row-reverse→ 直接用-webkit-flex-direction: row即可 -
column→-webkit-flex-direction: column安全可用 -
column-reverse→ 必须同时写-webkit-box-orient: vertical;+-webkit-box-direction: reverse;，否则 Safari 10 及更早会回退为row - 不要混用：比如
display: -webkit-flex; flex-direction: column-reverse;→ Safari 9 会丢弃后半句，布局错乱
父容器高度缺失会导致 column 表现异常
在 Safari 9–12 中，flex-direction: column 下若父容器无明确高度（如仅靠 min-height: 100vh），子项可能无法正确拉伸或换行，甚至塌陷成一条线。
- 必须设确定高度：
height: 100vh或height: -webkit-fill-available（iOS 11+ 支持） - 避免只用
height: 100%：旧版 Safari 不会从父级继承有效高度参与 flex 计算 - 垂直布局中，子项若需自适应高度，额外补
min-height: 0防止 Safari 默认不收缩
最危险的坑不是漏前缀，而是以为加了 -webkit-flex-direction 就万事大吉——旧内核对值、组合属性、父容器约束都极其敏感，任意一环断掉，整个 flex 布局就静默退化为 block。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
