Android 4.3及更早必须用display: -webkit-box兜底，且须满足三要素：-webkit-box声明在flex前、子元素有显式宽度锚点、HTML含viewport meta标签；-webkit-box-flex非flex:1等价替换，flex-wrap完全无效，真机getComputedStyle验证为唯一可靠手段。
因为老旧 WebView（尤其是 Android 4.3 及更早）压根不解析 display: flex，整条规则被跳过，不是“没生效”，而是 Flex 上下文根本没建立起来。
Android 4.3 及更早必须用 display: -webkit-box
这些版本的 WebKit 内核只识别 display: -webkit-box，display: -webkit-flex 是废弃草案、从未实现。写了也等于没写。
-
display: -webkit-box必须写在display: flex前面，顺序颠倒或漏掉，旧安卓直接跳过整条规则 - 子元素必须有显式宽度锚点：至少一个
width、max-width或flex-basis，否则所有项塌缩成内容宽 - HTML 必须含
，否则按桌面视口渲染，尺寸全错
-webkit-box-flex 不是 flex: 1 的简单映射
-webkit-box-flex 是无单位权重值，不是“占满剩余空间”。它和现代 flex-grow 行为不等价。
-
-webkit-box-flex: 1和-webkit-box-flex: 2的兄弟元素，按 1:2 分配剩余宽度 - 若子元素设了
width，会直接压制-webkit-box-flex，它不再参与伸缩计算 -
-webkit-box-orient: horizontal对应flex-direction: row，但不能写row—— 它不认识
flex-wrap 在旧安卓上完全无效
-webkit-box 是单行模型，flex-wrap: wrap 及其所有前缀变体（包括 -webkit-flex-wrap）在 Android 4.3 上被静默忽略，既不换行也不报错。
- 需要多行时，改用媒体查询切换为
display: block，让子项自然折行 - 导航类场景可用
overflow-x: auto+ 固定列数，实现横向滚动而非换行 - 极端情况可 JS 检测容器宽度，动态拆分 DOM（如每 3 个
.nav-item包进一个.nav-row）
真机测试不可替代，getComputedStyle 是唯一验证方式
Chrome DevTools 的安卓模拟器不反映老内核行为；Autoprefixer 默认不生成 -webkit-box 相关代码，即使配置了 browserslist 也要手动启用。
- 真机上运行
getComputedStyle(el).display，若返回"block"，说明-webkit-box未生效，立刻回头检查三要素 -
getComputedStyle(el).flexBasis返回"auto"，大概率意味着该值没进渲染树 —— 老安卓对auto解析极不稳定，常 fallback 到内容宽再算收缩 - 厂商定制 WebView（如 Android 5.1–6.0）中，
flex-shrink: 0形同虚设，必须用flex-basis: 0兜底
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
