Android 4.1–4.3 WebView基于WebKit 534内核，不支持display: -webkit-flex语法，仅识别display: -webkit-box；该模型需严格按顺序声明、使用专用属性（如-webkit-box-orient）、子项用-webkit-box-flex，且依赖viewport meta、显式宽度锚点和min-width: 0等硬性条件。
Android 4.3 及更早版本的 WebView 完全不识别 display: flex，加前缀也无效——必须降级为 display: -webkit-box，且顺序、值、环境缺一不可。
为什么 display: -webkit-flex 在 Android 4.3 上完全没反应？
Android 4.1–4.3 的 WebView 基于 WebKit 534（2012 年前内核），它压根没有 display: -webkit-flex 这个声明。你写上去，浏览器连解析都不会触发，getComputedStyle(el).display 返回的仍是 block。这不是“不兼容”，是语法根本不存在。
-
display: -webkit-box是唯一可用的弹性模型，且必须写在display: flex之前 - 漏掉
display: -webkit-box或顺序颠倒，整条规则被忽略 - Autoprefixer 默认不生成
-webkit-box相关代码，v10+ 已移除对该语法的支持
如何正确书写 -webkit-box 兼容规则？
不能简单把现代 Flex 属性加前缀映射过去——-webkit-box 是一套独立、受限的模型，值和行为都不同。
- 父容器必须按严格顺序写：
display: -webkit-box;→display: flex; -
flex-direction: row→-webkit-box-orient: horizontal（不能写row） -
justify-content: center→-webkit-box-pack: center（仅支持start/center/end/justify） -
align-items: center→-webkit-box-align: center（Android 4.0 存在垂直偏移 bug，加前缀也修不了） - 子项用
-webkit-box-flex: 1，不是flex: 1；它是权重值，兄弟项为2时按 1:2 分配剩余空间
哪些常见操作会让 -webkit-box 突然失效？
失效往往不是代码写错，而是三个硬性条件没满足：
立即学习“前端免费学习笔记（深入）”；
- HTML 中漏了
<meta name="viewport" content="width=device-width">，老 WebView 按桌面视口渲染，尺寸计算全乱 - 混用新旧语法：父容器写
display: -webkit-box，子元素却用flex: 1或justify-content，老内核直接跳过该子项 - 子元素没设显式宽度锚点：若所有兄弟项都没写
width，它们会塌缩成内容宽，-webkit-box-flex失去计算基准 -
width或max-width会压制-webkit-box-flex行为，需删掉或改用min-width
如何安全替代 gap 和 flex-wrap？
gap 在 Safari ≤14.1 和所有 Android WebView ≤76 中静默无效；flex-wrap 在 -webkit-box 模型中根本不存在。
- 模拟
gap: 16px必须同时满足四点：overflow: hidden、min-width: 0、box-sizing: border-box、间隙均分（如容器margin-left: -8px，子项margin-left: 8px） - 避免用
:not(:first-child)清首项 margin —— 旧 Safari 和 Android WebView 不支持，改用:nth-child(n+2) -
flex-wrap: wrap在 Android 4.3 及更早上完全无效，-webkit-box-lines: multiple等写法不存在；需换思路：媒体查询切display: block，或 JS 动态拆分 DOM
真正容易被忽略的是 min-width: 0：flex 子项默认不收缩，加上 padding 后极易在窄屏下溢出容器，而老 WebView 对 min-width 的处理又极不稳定——必须显式声明，且不能依赖全局重置。
