低版本Android（4.3及更早）必须降级为display: -webkit-box，因内核根本不识别display: flex或-webkit-flex；需严格按序声明display: -webkit-box在前、display: flex在后，并手动转换box-orient、box-pack等属性，同时配viewport、禁混用新旧语法、设显式宽度锚点。
低版本 Android（4.3 及更早）压根不识别 display: flex，所谓“错位”不是样式没生效，而是整个 Flex 上下文被浏览器跳过——justify-content、flex: 1 全部失效，元素退回到 display: block 的原始流式排版，自然就塌缩、错行、居中失灵。
Android 4.3 及更早必须用 display: -webkit-box
这不是加前缀的事，是模型降级：WebKit 534 内核（对应 Android 4.1–4.3 WebView）根本没有 display: -webkit-flex 这个概念，写了也等于没写。getComputedStyle(el).display 返回的仍是 block。唯一可行路径是手动切换到更底层的 box 模型：
-
display: -webkit-box必须写在display: flex之前，顺序颠倒或漏掉，旧安卓直接忽略整条规则 -
-webkit-box-orient: horizontal对应flex-direction: row，但vertical才对应column（别反了） - 子项用
-webkit-box-flex: 1，不是flex: 1——前者是无单位权重值，后者是语义组合，老内核根本不解析后者 -
-webkit-box-pack: center和-webkit-box-align: center才能替代justify-content与align-items
写了 -webkit-box 还塌缩？检查这三个硬性条件
失效通常不是代码写错，而是环境缺失或混用新旧语法：
- HTML 中必须有
<meta name="viewport" content="width=device-width">，否则老 WebView 按桌面模式渲染，视口宽度远超预期，尺寸计算全乱 - 禁止混用：父容器写
display: -webkit-box，子元素却用flex: 1或justify-content，老内核直接跳过该子项 - 所有参与
-webkit-box-flex分配的兄弟元素，必须设显式width（如width: 0或具体值），否则它们会塌缩成内容宽，-webkit-box-flex失去计算基准
flex-basis: auto 在 Android 5.1–6.0 厂商 WebView 中不可靠
这部分系统虽支持 display: flex，但对 flex-basis: auto 的解析极不稳定，常被忽略或误判为 0，导致子项高度突变、内容错位：
- 避免依赖
flex-basis: auto，显式写flex-basis: 0或具体值（如flex-basis: 200px） - 对需拉伸的子项，用
flex: 1 1 0替代flex: 1，明确flex-basis为0 - 关键项加兜底：比如
height: 100%或min-height，这是flex-shrink: 0失效时的最后一道防线
真机测试不可替代——Chrome DevTools 的 Android 模拟器无法复现 Android 5.1（WebView 39）、6.0（WebView 44）原生浏览器的渲染逻辑，它们和桌面 Chrome 差两个世代；另外，@supports (display: flex) 在这些老 WebView 中返回 true 但实际行为异常，不能信。最稳妥的做法是：目标覆盖 Android 4.2/4.3 时，关键布局直接放弃 Flex，改用 width/float 或 HTML 结构重排。
