Android 4.3及更早需用display: -webkit-box兜底，且必须满足三要素：-webkit-box声明在flex前、子元素有显式宽度锚点、HTML含viewport meta标签。
老旧浏览器（尤其是 Android 4.3 及更早 WebView、IE9 及以下）不支持标准 display: flex，强行使用会导致布局错位、子项塌缩、对齐失效甚至完全不渲染。解决核心不是“加前缀”，而是按内核能力分层降级：用老式弹性盒兜底、用传统流式 fallback、并严格满足生效条件。
Android 4.3 及更早：必须用 -webkit-box，且三要素缺一不可
这些版本的 WebKit 内核只识别 display: -webkit-box，-webkit-flex 是未实现的废弃草案，写了也等于没写。要让它真正生效，必须同时满足：
-
父容器声明顺序固定：
display: -webkit-box必须写在display: flex前面，否则整条规则被跳过 -
子元素有显式宽度锚点：至少一个
width、max-width或flex-basis；仅靠-webkit-box-flex: 1无法计算，会塌成内容宽 -
HTML 必含 viewport meta：
<meta name="viewport" content="width=device-width">，否则按桌面视口渲染，尺寸全错
IE8 及以下：直接放弃 Flexbox，换布局思路
IE8 及更早版本连 display: -ms-flexbox 都不支持（那是 IE10+ 才引入的）。不能“兼容 Flex”，只能替代：
- 用
float+overflow: hidden或*zoom: 1（IE6/7 触发 hasLayout）实现横向排列 - 用
display: table / table-cell实现等高、居中（IE8 支持，IE7 及以下需用真实<table>） <li>文字垂直居中改用 <code>line-height匹配容器高，或绝对定位 + 负 margin（需固定宽高） - 需要多行时，改用媒体查询切换为
display: block，让子项自然折行 - 导航类场景可用
overflow-x: auto+ 固定列数，实现横向滚动而非换行 - 极端情况可 JS 检测容器宽度，动态拆分 DOM（如把一组
.nav-item按每 3 个包进一个.nav-row） - 检查
browserslist是否含android 4.3，运行npx autoprefixer --info确认输出包含-webkit-box - 测试必须用 Android 4.3 真机，或 WebView 37（对应 Android 4.3 系统 WebView 版本）模拟环境
- 在真机上用
getComputedStyle(el).display查看实际值，若返回block，说明-webkit-box未生效，回头检查三要素
多行布局在旧安卓上无效？别写 flex-wrap
-webkit-box 是单行模型，flex-wrap: wrap 及其所有前缀变体（包括 -webkit-flex-wrap）在 Android 4.3 上被静默忽略，不会换行也不会报错。
立即学习“前端免费学习笔记（深入）”；
验证和构建必须真机或精准模拟
Chrome DevTools 的安卓模拟器不反映老内核行为，Autoprefixer 也不会自动补 -webkit-box，除非明确配置：
