安卓4.4 webview仅支持2012年草案的-webkit-flex语法，需用display: -webkit-flex等带前缀属性，禁用无前缀flex、gap、calc()等现代特性，并注意viewport、父容器尺寸及img内联属性等隐藏坑。
安卓4.4 WebView不支持display: flex？先确认是否真用了新语法
安卓4.4的WebView基于Chromium 30，它对Flexbox的支持非常有限：只识别带-webkit-前缀的旧版语法（2012年草案），完全忽略display: flex、justify-content等现代无前缀属性。如果你写了标准写法却没加前缀，布局直接失效——不是“不兼容”，是根本没被解析。
常见错误现象包括子元素堆叠在左上角、宽度塌陷、flex-wrap无效、align-items完全不起作用。
- 必须同时声明带前缀和无前缀版本（即使无前缀在4.4下无效，也为高版本留兼容）
- 旧版语法中，
display: -webkit-box≠display: -webkit-flex：前者是更早的“box”模型（仅支持单行、无wrap），后者才是Chromium 30实际支持的“flex”草案 - 避免混用：不要在一个选择器里既写
-webkit-box-orient又写flex-direction，Chromium 30会按声明顺序覆盖，行为不可控
哪些flex属性在安卓4.4下可用？只用这些安全值
Chromium 30（安卓4.4 WebView）支持的是2012年W3C Flexbox Working Draft，关键可用属性如下：
-
display: -webkit-flex（必须，不能只写display: flex） -
-webkit-flex-direction: row | column（不支持row-reverse等） -
-webkit-flex-wrap: wrap（仅支持wrap，nowrap默认，wrap-reverse无效） -
-webkit-justify-content: flex-start | center | flex-end | space-between（space-around不支持） -
-webkit-align-items: flex-start | center | flex-end | stretch（baseline等无效） - 子项上：
-webkit-flex: 1（等效于flex: 1 1 0），但-webkit-flex: 0 0 auto写法可能被忽略，建议用width/height显式控制
绝对要避开：gap、place-items、flex-basis: max-content、任何calc()参与的flex相关计算——Chromium 30的CSS解析器会静默丢弃整条声明。
为什么加了-webkit前缀还是不生效？检查三个隐藏坑
即使语法正确，仍可能白屏或错位，问题往往出在环境或组合规则上：
-
viewport meta缺失或不完整：安卓4.4 WebView对视口极其敏感，必须配全
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，漏掉maximum-scale会导致flex容器宽度计算异常 -
父容器未设宽高：旧版flex依赖父容器有明确尺寸，若父级是
div且没设width或height，-webkit-flex可能退化为display: block -
img标签带内联width/height属性：这是最隐蔽的坑——
<img src="x.jpg" style="max-width:90%">会强制覆盖flex的伸缩逻辑，必须移除所有width/height属性，改用CSS控制
要不要用autoprefixer？别信默认配置
现代autoprefixer默认已放弃安卓4.4支持（目标浏览器通常设为"> 5%"或"last 2 versions"），直接跑会漏掉-webkit-前缀。必须手动锁定兼容范围：
module.exports = {
plugins: [
require('autoprefixer')({
overrideBrowserslist: ['Android >= 4.4']
})
]
}
但更推荐的做法是：在构建流程中单独抽一个flex-android44.css文件，手写带前缀的规则，避免autoprefixer误删或错配。因为Chromium 30对前缀解析极脆弱——比如-webkit-flex: 1 1 auto会被当作无效值丢弃，而-webkit-flex: 1才真正生效。
真正难的不是写对语法，而是记住：安卓4.4的flex不是“降级”，是换了一套引擎；你写的每一条规则，都得经得起2012年草案的校验，而不是2023年标准的宽容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
