旧安卓4.3及更早必须用display: -webkit-box且置于display: flex之前，安卓4.4支持-webkit-flex但禁用gap和calc()，ie10/11需-ms-flexbox并展开flex: 1为-ms-flex: 1 1 0%。
Flexbox 在移动端不显示，大概率不是代码写错了，而是浏览器压根没解析那行 display: flex —— 尤其在旧安卓或某些 WebView 里，它连“看见”都做不到。
旧安卓 4.3 及更早：必须用 display: -webkit-box，且顺序不能错
Android 4.3 及更早的 WebView 内核根本不识别 display: flex 或 display: -webkit-flex，写了等于白写。唯一能生效的是 display: -webkit-box，而且必须放在无前缀声明之前：
.container {
display: -webkit-box;
display: flex;
}
- 顺序颠倒（
display: flex在前）→ 旧安卓直接跳过整条规则 - 漏掉
display: -webkit-box→ 布局退化为display: block，子项垂直堆叠 -
-webkit-box-orient: horizontal才对应flex-direction: row，写row无效 - 子项要撑满剩余空间，得用
-webkit-box-flex: 1，不是flex: 1 - 如果子项有
width或max-width，会压制-webkit-box-flex行为，必须删掉或改用min-width
安卓 4.4：可用 display: -webkit-flex，但别碰 gap 和 calc()
Android 4.4（Chromium 30）支持草案版 display: -webkit-flex，但它对计算类属性极其敏感，出错时静默丢弃整条声明，不报错也不提示：
- 必须显式写
display: -webkit-flex，不能只靠 autoprefixer 输出的无前缀版本 -
-webkit-flex-wrap: wrap可用，但wrap-reverse、space-around不支持 -
gap、place-items、任何含calc()的flex-basis或三值flex都会被忽略 -
@supports (display: flex)在安卓 4.4 下完全失效，降级样式必须写在块外，不能包裹在@supports里
移动端布局错乱：根本原因是子项缺 width: 100%
桌面正常、手机错位，常见于 .inputs 这类 Flex 子容器没设宽度——现代浏览器可能“侥幸”撑开，但 Safari iOS 和部分 Android WebView 会按 min-content 收缩，导致兄弟元素被挤出边界：
- 修复只需一行：
.inputs { width: 100%; }，它等效于flex-basis: 100% - 若父容器是固定宽（如
width: 300px），子项不设宽，移动端常塌缩到 120px 左右 - 避免在 Flex 容器内混用
float，浮动元素脱离文档流，会破坏 Flex 计算逻辑 - 固定像素宽高（如
width: 500px）在手机上必然溢出，应改用max-width: 100%或响应式单位
IE10/11：flex: 1 必须拆成 -ms-flex: 1 1 0%
IE10 只认 display: -ms-flexbox，IE11 虽支持无前缀 display: flex，但关键行为仍依赖 -ms- 前缀。最常踩坑的是缩写：
-
flex: 1在 IE10 中被解析为flex: 1 1 auto，但不支持三值语法，结果子项宽度归零 - 必须显式写：
-ms-flex: 1 1 0%，且0%不能省略 -
justify-content对应-ms-flex-pack，align-items对应-ms-flex-align -
flex-wrap: wrap在 IE10 中完全无效，需用媒体查询切换为display: block
真机测试比模拟器可靠得多——Chrome DevTools 的 Android 模拟和实际 Android 5.1/6.0 WebView 渲染逻辑差两个世代，window.getComputedStyle(el).flexBasis 返回 auto 往往意味着 flex-basis 根本没进渲染树，这时候兜底样式和顺序写法比调试更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
