android 4.4以下不支持flex，必须降级为display: -webkit-box；需手动设置父容器display: -webkit-box及子元素-webkit-box-flex等属性，且须配viewport、禁混用新旧语法、显式设宽度锚点。
Android 4.4以下根本不用flex，得切到-webkit-box
Android 4.1–4.3的WebView压根不识别display: flex，连带display: -webkit-flex也完全无效——这不是“不生效”，而是整个Flex上下文根本没建立。你写任何现代flex属性，浏览器都会跳过，getComputedStyle(el).display返回的仍是block或inline。
真正能用的只有display: -webkit-box，它是老内核唯一原生支持的弹性模型。但必须手动重写：父容器先写display: -webkit-box，子元素再配-webkit-box-flex、-webkit-box-orient等，Autoprefixer生成不了这些。
-
-webkit-box-flex: 1表示按权重分剩余空间，不是“占满”；它不支持flex-grow/flex-shrink分离控制 -
-webkit-box-orient: vertical才对应flex-direction: column，别把horizontal和row直接等同 -
-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不稳定
这部分系统虽支持display: flex，但flex-basis: auto解析极不可靠，常被忽略或误判为0，导致子项高度/宽度突变、内容错位。
实操建议：
- 避免依赖
flex-basis: auto，显式写flex-basis: 0或具体值（如flex-basis: 200px） - 对需拉伸的子项，用
flex: 1 1 0替代flex: 1，明确flex-basis为0 - 在
@supports (display: flex)块内做降级判断，不支持时回退到-webkit-box方案
Firefox里flex:1不占满？加min-width:0
Firefox对flex: 1的解析比Chrome严格得多：默认给flex项设min-width: auto（行内方向），当父容器宽度受限且子项含文字时，它会阻止收缩，导致flex: 1被忽略，内容被压缩或截断。
修复方式很直接：
- 对需拉伸的子项加
min-width: 0（水平布局）或min-height: 0（垂直布局） - 别只写
flex: 1，改用完整写法：flex: 1 1 0 - 若子项是图片或iframe，额外加
flex-shrink: 0防被错误压缩
真机测试时，flex-basis是否被强制转成auto，光看开发者工具不够，得连真机看computed样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
