android 4.4以下不支持flex布局，必须降级为display: -webkit-box；需显式设置-webkit-box-flex、-webkit-box-orient等属性，且注意语义差异与兼容写法，真机测试不可替代。
Android 4.4以下根本不认display: flex
不是样式没生效，而是整个Flex上下文被浏览器直接忽略——连display: -webkit-flex都解析失败。老内核（比如Android 4.1 WebView）压根没有Flex概念，你写再多现代语法，它就当没看见。这时候加前缀没用，必须降级到更底层的display: -webkit-box模型。
display: -webkit-box和display: flex语义不等价
别指望Autoprefixer自动帮你转flex: 1成-webkit-box-flex: 1，它不会做这种语义映射。关键差异在：
-
-webkit-box-flex是无单位数字，表示“剩余空间分配权重”，不是“占满剩余空间” -
-webkit-box-orient: horizontal对应flex-direction: row，但vertical才对应column，别反了 -
-webkit-box-pack和-webkit-box-align的取值范围比现代属性少（比如没有space-between） - 父容器**必须先声明
display: -webkit-box**，否则子元素的-webkit-box-flex完全无效
写了-webkit-box还是没撑开？检查这三处
常见失效不是代码写错，而是环境没配齐：
- HTML里漏了
<meta name="viewport" content="width=device-width">，导致老WebView按桌面模式渲染，尺寸计算全乱 - 混用了新旧写法：比如父容器写
display: -webkit-box，子元素却用flex: 1，老内核直接跳过该子项 - 没给
-webkit-box-flex的兄弟元素设width：老模型需要显式宽度锚定基准，否则所有子项都塌缩成内容宽
真机测试时window.getComputedStyle(el).flexBasis返回auto怎么办
说明flex-basis根本没进渲染树——老安卓（尤其是4.4–6.0厂商定制WebView）对auto的解析极不稳定，会强行 fallback 到内容宽度再算收缩，导致flex-shrink: 0形同虚设。此时必须：
- 改用
flex: 0 0 200px代替分开写三个属性，简写更易被老引擎统一识别 - 对关键项加
min-width: 200px兜底，这是flex-shrink: 0失效时的最后一道防线 - 别信Chrome DevTools的Android模拟，得实测Android 5.1（WebView 39）、6.0（WebView 44）原生浏览器，它们的渲染逻辑和桌面Chrome差两个世代
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
