旧版安卓（4.3及更早）不支持display: flex，必须用display: -webkit-box且需同时满足三条件：父容器顺序声明、子元素显式宽度锚点、html含viewport meta标签；-webkit-flex无效因内核未实现该草案。
旧版安卓（4.3 及更早）根本不认 display: flex，加前缀没用，必须手动降级到 display: -webkit-box，且顺序、锚点、viewport 缺一不可。
为什么 display: -webkit-flex 在 Android 4.3 上完全无效
这不是“不生效”，而是浏览器压根不解析这条声明。Android 4.1–4.3 的 WebView 基于 2012 年前的 WebKit 内核，它只识别 display: -webkit-box 这一套老式弹性盒模型。display: -webkit-flex 是个从未被实现的废弃草案写法，Autoprefixer 从不生成它，真机上 getComputedStyle(el).display 返回的仍是 block。
- 别在 CSS 里写
display: -webkit-flex—— 它不会触发任何 Flex 行为 - 检查构建输出：运行
npx autoprefixer --info，确认 browserslist 明确包含android 4.3，否则连-webkit-box都不会生成 - Chrome DevTools 的安卓模拟器不可信，必须用 Android 4.3 真机或 WebView 37 模拟环境验证
怎么写才能让 display: -webkit-box 真正生效
生效不是靠属性全不全，而是三个硬性条件同时满足：父容器声明、子元素锚点、页面渲染上下文。漏掉任一环，所有子项都会塌缩成内容宽。
- 父容器必须严格按顺序写：
display: -webkit-box;在前，display: flex;在后；颠倒顺序，旧安卓直接跳过整条规则 - 子元素必须设显式宽度锚点：
width、max-width或flex-basis（不能全靠-webkit-box-flex: 1），否则-webkit-box-flex失去计算基准 - HTML 必须带
<meta name="viewport" content="width=device-width">；漏掉这个，老 WebView 按桌面视口渲染，尺寸计算全错 -
-webkit-box-flex: 1是权重值，不是“占满”——若兄弟是-webkit-box-flex: 2，空间按 1:2 分配，不是 1:1
为什么 flex-wrap: wrap 在旧安卓上毫无反应
-webkit-box 是单行模型，没有换行概念。flex-wrap 及其所有变体（包括 -webkit-flex-wrap）在 Android 4.3 及更早版本中完全无效，浏览器安静忽略，不报错也不 fallback。
- 不要尝试给
-webkit-box加flex-wrap: wrap，它不会产生任何效果 - 需要多行布局时，改用媒体查询 +
display: block切换传统流式结构 - 或用 JS 检测容器宽度，动态拆分 DOM（例如把
.nav-item按需包裹进多个.nav-row） - 放弃“自动换行”，改用固定列数 +
overflow-x: auto实现横向滚动导航
Android 5.1–6.0 厂商 WebView 中的 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 - Firefox 下
flex: 1不占满？补min-width: 0，它默认设min-width: auto阻止收缩 - IE10/11 中
flex: 1塌缩？手动写-ms-flex: 1 1 0%并确保父容器有height或min-height
最易被忽略的是：旧安卓的失效不是样式“没加载”，而是整个 Flex 上下文根本没建立——所以不能只查 CSS 是否输出，得用真机跑 getComputedStyle 看 display 值是否真的进了渲染树。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
