安卓4.3及更早机型flex嵌套失效是因webkit 534内核根本不识别display: flex或-webkit-flex，getcomputedstyle返回"block"，flex上下文未建立；需同时满足viewport、语法统一、显式宽高三条件，否则降级为块级流渲染。
安卓4.3及更早机型里flex嵌套直接失效，不是bug是内核缺失
Android 4.3及更早的WebView（基于WebKit 534）压根不识别display: flex，连display: -webkit-flex都解析失败——getComputedStyle(el).display返回"block"，说明Flex上下文根本没建立。这时候谈“嵌套计算异常”是伪命题：外层容器没进Flex流程，内层自然全按普通块级流渲染，所谓“错位”“塌缩”“间距消失”，其实是整个布局模型降级导致的必然结果。
嵌套失效的三个硬性触发条件必须同时满足
哪怕写了display: -webkit-box，只要漏掉以下任一条件，嵌套结构就会退化成不可控的堆叠：
-
<meta name="viewport" content="width=device-width">缺失 → 老WebView按桌面视口宽度渲染，所有flex-basis、flex-grow计算基准错乱 - 混用新旧语法：父容器写
display: -webkit-box，子元素却用flex: 1或justify-content→ 老内核跳过该子项，不参与box模型计算 - 兄弟元素都没设显式
width或height→-webkit-box-flex失去分配基准，全部塌缩为内容宽高
真机验证时flex-basis: auto在Android 5.1–6.0厂商WebView中会静默失效
这部分系统虽支持display: flex，但flex-basis: auto解析极不稳定，常被忽略或误判为0，导致嵌套中子项高度突变、文字截断、按钮错位。实操中必须：
- 避免单独写
flex-basis: auto，改用flex: 1 1 0或flex: 0 0 200px，简写能强制老引擎统一识别三值语义 - 对关键嵌套层级加兜底：
min-height: 44px、line-height: 1.4等固定约束，防止flex-shrink: 0形同虚设 - 不用
@supports (display: flex)做降级判断——它在Android 4.3上返回true，但实际不工作；必须用UA检测或document.createElement('div').style.flex !== undefined手动探测
嵌套结构中gap属性在Android 4.4–11全系无效，得靠负margin模拟
gap在低版本安卓上不是兼容问题，是彻底不存在的CSS属性。试图用Autoprefixer补前缀毫无意义，因为老内核连gap这个关键词都不认识。唯一可靠方案是手动负边距抵消：
.parent {
display: -webkit-box;
display: flex;
margin-right: -8px;
margin-bottom: -8px;
}
.parent > * {
margin-right: 8px;
margin-bottom: 8px;
}
注意：此写法必须配合display: -webkit-box前置声明，且所有子元素需有明确width锚点（如width: 50%），否则负margin会把整行拉出视口边界。
嵌套计算异常的本质，从来不是CSS写错了，而是你默认的Flex抽象能力，在目标设备的渲染引擎里压根不存在。真正要盯住的，是viewport是否生效、display声明顺序是否正确、以及每一层嵌套是否都提供了可计算的尺寸锚点——这些细节一旦漏掉，再标准的flex语法也救不回错位的UI。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
