Android 4.3及更早不支持display: flex和-webkit-flex，回退为block渲染；需用-webkit-box并严格按顺序声明，配合viewport、显式宽高锚点及真机验证。
低版本 Android（4.3 及更早）压根不识别 display: flex，所谓“错位”不是样式没生效，而是 Flex 上下文根本没建立——浏览器直接当它不存在，回退到 display: block 渲染，子元素自然堆叠、塌缩、换行异常。
Android 4.3 及更早：display: -webkit-flex 完全无效
这些机型的 WebView 内核（WebKit 534）连 display: -webkit-flex 都没实现。你写上去，getComputedStyle(el).display 返回的仍是 block。Autoprefixer 补了前缀也没用，因为这不是语法问题，是能力缺失。
-
display: -webkit-flex在 Android 4.2–4.3 中等同于display: block，子项失去弹性行为 - 写了
flex: 1会被静默丢弃，不报错也不生效 - 部分老机型（如三星 GT-I9100）对
-webkit-box-orient: vertical直接 fallback 到block
必须降级为 display: -webkit-box 且顺序不能错
兼容旧安卓和现代浏览器，同一选择器里必须严格按顺序声明：
.container {
display: -webkit-box;
display: flex;
}
- 漏掉第一行，旧安卓白屏或内容塌缩
- 顺序颠倒（
display: flex在前），旧安卓直接忽略整条规则 - 父容器必须显式设
-webkit-box-orient: horizontal或vertical，否则子项不按预期方向排列 -
-webkit-box-flex: 1不等于flex: 1：前者是权重值（参与剩余空间分配），后者是语义组合
写了 -webkit-box 还是塌缩？检查三个硬性条件
失效往往不是代码写错，而是环境缺失：
- HTML 中漏了
，老 WebView 按桌面模式渲染，视口宽度远超预期 - 混用新旧写法：父容器写
display: -webkit-box，子元素却用flex: 1或justify-content，老内核直接跳过该子项 - 子元素没设显式宽度锚点：在
-webkit-box模型里，若兄弟元素都没写width，所有项都会塌缩成内容宽，-webkit-box-flex失去计算基准
Android 5.1–6.0：flex-basis: auto 解析极不稳定
这部分系统虽支持 display: flex，但 flex-basis: auto 常被忽略或误判为 0，导致子项高度突变、内容错位。
- 避免依赖
flex-basis: auto，显式写flex-basis: 0或具体值（如flex-basis: 200px） - 对需拉伸的子项，用
flex: 1 1 0替代flex: 1，明确flex-basis为0 - 一行写全比分开声明更稳：
flex: 0 0 200px比flex-shrink: 0+flex-basis: 200px更易被老引擎统一识别 - 真机测试时用
window.getComputedStyle(el).flexBasis打印返回值，如果是auto或0px，说明没生效
真正要命的不是写错某一行 CSS，而是把 display: flex 当作通用能力——在 Android 4.3 上，它根本不存在。降级逻辑、viewport 控制、显式锚点、真机验证，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
