旧安卓（≤4.3）和iOS≤9的WebView不解析display: flex，仅识别display: -webkit-box；display: -webkit-flex被静默丢弃，必须结构降级为-webkit-box，并映射属性、控制书写顺序。
旧安卓（≤4.3）和 iOS ≤9 的 WebView 根本不解析 display: flex，只认 display: -webkit-box；光加前缀没用，必须结构降级 + 属性映射 + 顺序控制。
为什么 display: -webkit-flex 在 Android 4.2–4.3 上等于没写
Android 4.2–4.3 的 WebView 基于 2012 年前的 WebKit 分支，它识别 display: -webkit-box，但对 display: -webkit-flex 和 display: flex 都直接跳过——整条 CSS 规则被静默丢弃，不报错也不渲染。常见现象包括：容器退化为 block、子项堆成一列、justify-content 完全无效、flex: 1 没反应。
-
display: -webkit-flex在这些版本中行为等同于display: block - 写了
-webkit-flex: 1也会被忽略，必须改用-webkit-box-flex: 1 - 仅双写
display: -webkit-flex; display: flex;不够，老内核根本不会走到第二条 - 正确写法必须是：
display: -webkit-box;放第一行，display: flex;放第二行
-webkit-box 下怎么模拟 flex-direction 和 justify-content
-webkit-box 是单行、无换行概念的老模型，所有对齐和方向都靠独立属性控制，且值不接受现代关键字（如 row、space-between）。
-
flex-direction: row→-webkit-box-orient: horizontal（不能写row） -
flex-direction: column→-webkit-box-orient: vertical（部分机型如 GT-I9100 只支持horizontal） -
justify-content: center→-webkit-box-pack: center（不是justify） -
justify-content: space-between→-webkit-box-pack: justify -
align-items: center→-webkit-box-align: center（注意：Android 4.0 上可能有垂直偏移 bug，加前缀也修不了）
如何安全模拟 gap 和避免子项溢出
Safari ≤14.1 和所有旧安卓 WebView 都不支持 gap；@supports (gap: 0) 在 Safari 14.1 中会返回 true 但实际不生效，是典型“伪支持”陷阱。
立即学习“前端免费学习笔记（深入）”；
- 模拟
gap: 16px必须四条件同时满足：overflow: hidden、min-width: 0、box-sizing: border-box、间隙均分（容器margin-left: -8px; margin-right: -8px，子项margin-left: 8px; margin-right: 8px） - 别用
:not(:first-child)清首项 margin —— 旧 Safari 和 Android WebView 不支持该伪类 - 必须给弹性子项加
min-width: 0（或min-height: 0），否则默认不收缩，加了padding后极易撑破容器 -
flex: 1在 Safari ≤9 垂直布局中常塌陷，要拆解为-webkit-flex: 1 1 auto;+flex: 1 1 auto;+min-height: 0
微信小程序和 X5 内核的特殊处理
微信 iOS 8–10 和部分安卓低端机仍用 X5 内核（基于旧 WebKit），display: flex 失效不是小程序问题，而是底层限制。navigator 标签不支持直接设 flex，必须用 <view></view> 包裹。
- 容器需四写：
display: -webkit-box;、display: -ms-flexbox;、display: -webkit-flex;、display: flex; - 主轴对齐必须叠加：
-webkit-box-pack: center;+-ms-flex-pack: center;+justify-content: center; - inline 元素（如
<span></span>）在老内核下-webkit-box-flex无效，需先设display: block或display: -webkit-box - autoprefixer 默认不补
-webkit-box，推荐配置目标浏览器为ios ，并确保 loader 顺序是 <code>less-loader → postcss-loader → css-loader
真正容易被忽略的是 min-width: 0 和 display: -webkit-box 的强制前置顺序——前者防内容撑宽，后者是旧安卓唯一能识别的入口，漏掉任一，整个降级链就断了。
