旧版 Safari（≤13.1）和 iOS（≤13.3）必须写 display: -webkit-flex，否则 display: flex 不被解析；Android 4.3 及更早需用 display: -webkit-box，且顺序不可颠倒，autoprefixer 不支持自动注入。
旧版 Safari（≤13.1）和 iOS（≤13.3）必须写 display: -webkit-flex
不是“建议加前缀”，而是不写这行，display: flex 在 Safari 9–13.1 中根本不会被解析——布局引擎直接跳过，子项退化为普通块级流。必须把 display: -webkit-flex 放在 display: flex 前面，顺序颠倒或漏掉，整条规则失效。
常见错误现象包括：容器高度塌陷、子项全部左上角堆叠、justify-content: center 完全没反应。
-
-webkit-flex-direction值与标准一致（row/column），但row-reverse需搭配-webkit-flex-direction: row-reverse，不能只靠现代语法 -
-webkit-justify-content仅支持flex-start/center/flex-end/space-between；space-around会被静默忽略 -
-webkit-align-items同样不支持baseline或first baseline，用center或stretch更稳妥
Android 4.3 及更早必须回退到 display: -webkit-box
Android 4.3 及更早的 WebView 使用的是 2012 年前 WebKit 内核，它连 display: -webkit-flex 都不认，唯一能触发弹性行为的是 display: -webkit-box，且必须严格前置：
.container { display: -webkit-box; display: flex; }
立即学习“前端免费学习笔记（深入）”；
漏掉第一行，或把顺序写反，整个容器按 display: block 渲染——这不是兼容性问题，是语法不可识别。
-
-webkit-box-orient: horizontal对应flex-direction: row，不能写row -
-webkit-box-pack: center才是justify-content: center的等效写法，justify-content本身无效 -
-webkit-box-flex: 1是权重值，不是“占满剩余空间”；若兄弟项是-webkit-box-flex: 2，它们按 1:2 分配剩余宽度 - 子元素设了
width或max-width，会直接压制-webkit-box-flex行为，必须删掉或改用min-width
flex: 1 在旧版 WebKit 中容易坍缩为 0
在 Safari ≤14.1 和 Android 4.4 中，flex: 1 常因 flex-basis: auto 触发内容宽度保护机制，导致实际分配为 0。不能只加前缀，得拆解并显式控制基线：
推荐写法：-webkit-flex: 1 1 0; flex: 1 1 0; 或更稳妥地：-webkit-flex-grow: 1; -webkit-flex-shrink: 1; -webkit-flex-basis: 0;
- 避免
flex-basis: auto或含calc()的值，Chromium 30（Android 4.4）和 Safari ≤13.1 都会静默丢弃整条声明 - 子项是图片时，额外加
min-width: 0和width: 100%，否则 Safari 会按 intrinsic width 锁死伸缩 - 父容器若无明确
height或max-height，align-items: center在 Chrome 27/Safari 12 下可能计算为空白区域
Autoprefixer 默认不生成 -webkit-box 或老版 -webkit-flex
autoprefixer v10+ 已移除对 -webkit-box 的支持；即使配置 browserslist 包含 android 4.3，它也不会输出 -webkit-box-flex: 1 或 -webkit-box-pack 等声明。要让它工作，必须手动补全，或启用实验性旧语法插件。
更现实的做法是：把关键降级样式写在独立 CSS 块中，不依赖工具链自动注入——因为 @supports 在 Android 4.4 下完全失效，无法用特性检测做条件加载。
真正麻烦的从来不是多写几行前缀，而是同一套样式在 Safari 9、Android 4.4、Chrome 25 之间，flex-wrap 是否生效、gap 是否被忽略、flex-basis 解析逻辑是否一致——这些差异没法靠一套规则覆盖，得按设备 UA 或运行时能力分层处理。
