旧版Android WebView（≤4.3）完全不支持display: flex，必须用display: -webkit-box并严格按序声明；flex-wrap无效，gap在Safari≤14.1中未实现，需用负margin+overflow:hidden等四条件模拟。
旧版 Android WebView（≤4.3）根本不认 display: flex
这不是加前缀就能修好的问题。Android 4.3 及更早的 WebView 使用的是 2012 年前的 WebKit 内核，只识别 display: -webkit-box，写了 display: flex 或 display: -webkit-flex，整条规则会被直接忽略——连解析都不会触发。
常见错误现象包括：页面白屏、子项堆成一列、居中失效、flex: 1 完全没反应。
- 必须在同一选择器里严格按顺序写：
display: -webkit-box;放第一行，display: flex;放第二行；漏掉或颠倒顺序，旧安卓就跳过整条规则 -
-webkit-box-orient: horizontal对应flex-direction: row，但不能写row—— 它不识别 -
-webkit-box-flex: 1是权重值，不是“占满剩余空间”；若兄弟项是-webkit-box-flex: 2，它们按 1:2 分配剩余宽度 - 子项设了
width或max-width，会直接压制-webkit-box-flex行为 -
flex-wrap在旧安卓上完全无效；-webkit-box是单行模型，没有换行概念，任何尝试加flex-wrap: wrap都会被安静忽略
Safari ≤14.1 的 gap 不是 bug，是压根没实现
写了 gap: 16px 等于没写。DevTools 里看 gap 是灰色或带删除线，getComputedStyle(el).gap 返回空字符串，就说明浏览器不认识它。
Safari 14.1 是个“伪支持”陷阱：@supports (gap: 0) 会返回 true，但实际在 flex 容器里仍跳过该声明，降级逻辑被绕过，布局直接错位。
立即学习“前端免费学习笔记（深入）”；
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 用负 margin 模拟 gap 必须同时满足四点：
overflow: hidden（防意外滚动）、min-width: 0（防内容撑宽溢出）、box-sizing: border-box（防 padding/border 失控）、间隙值均分（如目标gap: 16px→ 容器margin-left: -8px; margin-right: -8px，子项margin-left: 8px; margin-right: 8px） - 别用
:not(:first-child)清首项 margin —— 旧 Safari 和 Android WebView 不支持，改用:nth-child(n+2) - 真正容易被忽略的是
min-width: 0：flex 子项默认不收缩，加上 padding 后极易在窄屏下溢出容器
@supports (display: grid) 在 Android 4.4 WebView 里等于没写
Android 4.4 WebView 基于 Chromium 30，它既不支持 display: grid，也不支持 @supports 规则本身。整个 @supports 块会被当作无效 CSS 忽略，里面的样式一条都不会加载。
所以降级样式（比如 display: flex 或 float: left）必须写在 @supports 块**之外**，且语法得是老浏览器能认的。
- 别写
@supports not (display: grid)—— 这个语法在 Android 4.4 里直接报错并丢弃整条规则 - 真正起作用的是“老浏览器看不懂新语法，就自然走默认分支”，而不是主动检测
- 如果要用
@supports，必须加模板约束，例如：@supports (display: grid) and (grid-template-columns: 1fr)，否则 Safari 10.1、IE11 等“半支持”浏览器也会误入 Grid 分支，结果渲染失败 - Flex 降级分支里要显式重置
flex-wrap: wrap、flex-basis: auto、align-items: stretch，避免和 Grid 的二维逻辑耦合
IE10–11 的 flex-wrap 和 flex-shrink 行为和现代浏览器根本不同
IE10–11 用的是旧版 Flexbox（display: -ms-flexbox），不支持 flex-wrap: wrap，也不按标准计算 flex-shrink。长文本、固定宽容器、多行布局在这类浏览器里极易溢出或错位。
- 修复长文本溢出：给弹性项目加
flex-shrink: 0+overflow-wrap: break-word，而不是只靠word-break - IE10–11 中
flex: 1的 shorthand 会被部分忽略，建议拆开写：flex-grow: 1; flex-shrink: 1; flex-basis: 0 - 对齐方式异常（如
align-items: baseline失效）很常见，优先降级为align-items: flex-start或用vertical-align+inline-block替代 - 不要依赖
min-height让弹性容器撑高 —— IE10–11 中子元素可能无法继承高度，需加显式height或用position: absolute技巧兜底
最复杂的地方不是语法怎么写，而是不同旧浏览器对同一属性的“理解偏差”：Android 4.3 认 -webkit-box 但不认 flex-wrap，Safari 14.1 假装认 gap 实际跳过，IE11 认 -ms-flexbox 但算错 flex-shrink。这些不是配置问题，是内核级差异，必须靠真实设备或精确模拟环境验证，光靠 Can I Use 查表会踩坑。
