旧版浏览器对flexbox支持存在语法断层，需分层处理：android≤4.3必须用display: -webkit-box且顺序严格；ie10/11需展开flex缩写并加-ms-前缀；safari≤14.1不支持gap且@supports伪支持；@supports在android4.4中完全失效；min-width: 0是防溢出关键。
旧版浏览器对 Flexbox 的支持不是“加个前缀就完事”，而是存在语法断层、行为差异甚至完全忽略规则的情况。必须按目标浏览器分层处理，不能靠 Autoprefixer 一键兜底。
Android ≤4.3 必须用 display: -webkit-box，顺序不能错
Android 4.3 及更早的 WebView 内核根本不解析 display: flex 或 display: -webkit-flex，写了等于没写。唯一有效写法是：
.container {
display: -webkit-box;
display: flex;
}
漏掉第一行或颠倒顺序，整个容器退化为 display: block。常见错误现象包括子项堆成一列、flex: 1 失效、居中完全不生效。
-
-webkit-box-orient: horizontal对应flex-direction: row，但不能写row—— 它只认horizontal或vertical -
-webkit-box-pack: center才是justify-content: center的等效写法，-webkit-justify-content在此版本无效 -
-webkit-box-flex: 1是权重分配（比如兄弟项设2，则按 1:2 分剩余宽度），不是“占满剩余空间” - 子元素若设了
width或max-width，会直接压制-webkit-box-flex行为，必须删掉或改用min-width
IE10/11 的 flex 缩写必须拆开并加 -ms- 前缀
IE10 完全不识别 flex: 1，IE11 虽支持无前缀 display: flex，但关键属性仍依赖私有前缀。最常踩坑的是 flex 缩写被解析为 flex: 1 1 auto，而 IE10 不支持三值语法，结果子项宽度归零。
正确写法必须显式展开：
Android 开发调试技能，通过系统 ADB 工具操作 Android 设备。以下场景必须触发此技能：(1) 直接 ADB 操作——安装 APK、查看设备列表、抓取 logcat 日志、查看已安装应用、清除应用数据、截图、重启设备、拉取/推送文件、查看 CPU/内存/电池信息、adb shell 操作；(2)...
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
/* IE10 必须 */
-ms-flex-positive: 1;
-ms-flex-negative: 1;
-ms-flex-preferred-size: 0%;
}
-
flex-wrap: wrap在 IE10 中完全无效，IE11 需写-ms-flex-wrap: wrap -
align-items: center在 IE10 中对应-ms-flex-align: center，IE11 则用-ms-align-items: center -
justify-content在 IE10 是-ms-flex-pack，IE11 是-ms-justify-content—— 二者不能混用
Safari ≤14.1 不支持 gap，也不能靠 @supports 检测
Safari 14.1 对 gap 是“伪支持”：写 @supports (gap: 0) 会返回 true，但实际在 flex 容器里该声明被静默丢弃，布局直接错位。DevTools 中 gap 显示为灰色或带删除线，getComputedStyle(el).gap 返回空字符串，就说明它不认识。
模拟 gap: 16px 必须同时满足四个条件：
- 容器加
overflow: hidden（防意外滚动） - 容器加
margin-left: -8px; margin-right: -8px - 子项加
margin-left: 8px; margin-right: 8px - 所有子项加
min-width: 0（否则默认不收缩，窄屏下极易溢出） - 避免用
:not(:first-child)清首项 margin —— 旧 Safari 和 Android WebView 不支持，改用:nth-child(n+2)
@supports 在 Android 4.4 WebView 中完全失效
Android 4.4 WebView 基于 Chromium 30，既不支持 display: grid，也不支持 @supports 规则本身。整个 @supports 块会被当作无效 CSS 忽略，里面的样式一条都不会加载。降级样式必须写在 @supports 块外部，且不能依赖其包裹逻辑。
真正容易被忽略的是 min-width: 0 —— flex 子项默认最小宽度是内容宽度，加上 padding 后在窄屏下极易撑破容器，不加这句，哪怕其他前缀都对，布局依然会崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
