确认Flex容器未建立：真机调试中getComputedStyle(el).display返回"block"或"inline"而非"flex"或"-webkit-box"，即容器未进入Flex模式。
老旧 Android Webview（尤其是 ≤4.3）上 Flex 布局错乱，不是“样式没生效”，而是浏览器压根不解析 display: flex 或 display: -webkit-flex —— 整个 Flex 上下文被跳过，子元素退化为 display: block。排查必须从“是否建起了 Flex 容器”开始，而不是调 justify-content 的值。
怎么确认 Flex 容器根本没建立？
别信 DevTools 的模拟，真机或 WebView 调试器里直接查计算样式：
-
getComputedStyle(el).display返回"block"或"inline"，而非"flex"或"-webkit-box"→ 说明容器未进入 Flex 模式 - 写了
display: flex但子元素没按预期排列，且flex-direction、justify-content等属性在 Computed 面板里显示为灰色/删除线 → 浏览器不认识这些声明 - HTML 中漏了
→ 老 WebView 按桌面视口渲染，所有宽度计算失准，Flex 行为彻底紊乱
为什么写了 display: -webkit-box 还是塌缩或错位？
display: -webkit-box 不是 display: flex 的简单前缀版，它是一套独立模型，语义和约束完全不同：
- 必须严格按顺序写：
display: -webkit-box放第一行，display: flex放第二行；颠倒或漏掉任一，旧安卓直接忽略整条规则 -
-webkit-box-flex: 1是权重值，不是“占满剩余空间”；若兄弟项是-webkit-box-flex: 2，它们按 1:2 分配，不是 1:1 - 子元素没设
width或max-width，会导致所有项塌缩成内容宽 ——-webkit-box-flex需要显式宽度锚点才能算剩余空间 -
-webkit-box-orient: horizontal才对应flex-direction: row，写row会被忽略；vertical对应column
为什么 gap 和 flex-wrap 完全没反应？
这不是配置问题，是功能缺失：
-
flex-wrap在 Android ≤4.3 完全无效 ——-webkit-box是单行模型，没有换行概念，加了也静默丢弃 -
gap在 Safari ≤14.1 和所有旧安卓 WebView 中未实现；@supports (gap: 0)可能返回true但实际不生效，是“伪支持”陷阱 - 用负 margin 模拟
gap必须同时满足四点：overflow: hidden（防滚动）、min-width: 0（防内容撑宽溢出）、box-sizing: border-box（控 padding/border）、间隙值均分（如目标gap: 16px→ 容器margin-left: -8px，子项margin-left: 8px） - 别用
:not(:first-child)清首项 margin —— 旧 Safari 和 Android WebView 不支持，改用:nth-child(n+2)
为什么真机测试时 flex-basis: auto 表现诡异？
Android 5.1–6.0 厂商定制 WebView 对 flex-basis: auto 解析极不稳定，常误判为 0 或直接忽略，导致高度突变、拉伸失效：
- 避免依赖
flex-basis: auto，显式写flex-basis: 0或具体值（如flex-basis: 200px） - 对需拉伸的子项，用
flex: 1 1 0替代flex: 1，强制flex-basis为0 - 若用
@supports (display: flex)做降级，注意该语法在 Android 4.4 WebView 中同样不被识别，检测块会被跳过
真正容易被忽略的是 min-width: 0：Flex 子项默认不收缩，加上 padding 后极易在窄屏下溢出容器，而老 WebView 对溢出处理更粗暴 —— 不是隐藏，是直接破坏布局流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
