android 4.4以下不支持任何flex写法，必须用display: -webkit-box降级；其box-flex、box-orient等需手动重写，且依赖viewport meta、显式宽度锚点和真机测试。
display: -webkit-flex 在 Android 4.4 及以下版本中完全无效，加这个前缀解决不了任何问题——它既不是标准旧语法，也不被老内核识别。
Android 4.4 以下根本不认 display: flex，连带所有现代写法全被忽略
老 WebView（如 Android 4.1–4.3）的渲染引擎压根没有 Flex 概念。你写 display: flex、display: -webkit-flex 或 display: -ms-flexbox，浏览器都会当作无效声明跳过，不会报错，也不会 fallback。这不是“没生效”，而是整个 Flex 上下文根本没建立起来。
-
display: -webkit-flex是一个早已废弃、从未被主流内核实现的中间草案写法，Autoprefixer 从不生成它 - Android 4.4+ 才开始支持
display: flex（无前缀），但仅限部分属性；IE10–IE11 要用display: -ms-flexbox+ 对应旧属性值 - 真机上用
getComputedStyle(el).display查，返回的仍是block或inline，说明声明压根没进样式表
真正该用的降级方案是 display: -webkit-box
只有 display: -webkit-box 是 Android 4.1–4.3 原生支持的弹性布局底层模型。但它和 Flex 语义不等价，不能靠 Autoprefixer 自动转换，必须手动重写关键逻辑：
- 父容器必须先写
display: -webkit-box，否则子元素的-webkit-box-flex完全无效 -
-webkit-box-flex: 1表示“按权重分剩余空间”，不是“占满剩余空间”；它不接受flex-grow/flex-shrink这类分离控制 -
-webkit-box-orient: horizontal对应flex-direction: row，但vertical才对应column，方向别反 -
-webkit-box-pack和-webkit-box-align取值极少（如没有space-between），需用margin或额外 wrapper 补足
写了 -webkit-box 还是塌缩？检查这三个硬性条件
失效往往不是代码写错，而是环境缺失：
- HTML 中漏了
<meta name="viewport" content="width=device-width">，老 WebView 按桌面模式渲染，视口宽度远超预期，导致尺寸计算全乱 - 混用新旧写法：父容器写
display: -webkit-box，子元素却用flex: 1或justify-content，老内核直接跳过该子项 - 子元素没设显式宽度锚点：在
-webkit-box模型里，若兄弟元素都没写width，所有项都会塌缩成内容宽，-webkit-box-flex失去计算基准
真机测试时 flex-basis 返回 auto 就等于没进渲染树
在 Android 5.1–6.0 的厂商定制 WebView 中，flex-basis: auto 解析极不稳定，常 fallback 到内容宽度再算收缩，导致 flex-shrink: 0 形同虚设。此时必须放弃依赖 flex-basis，改用 width 或 min-width 显式锚定，并给关键项加 flex-shrink: 0 兜底。
别信 Chrome DevTools 的 Android 模拟——它模拟的是 Blink 内核，而老安卓用的是 WebKit 分支，渲染逻辑差两个世代。必须实测 Android 5.1（WebView 39）、6.0（WebView 44）原生浏览器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
