旧版webkit内核（如android 4.3及更早、safari≤13.1）完全不解析display: flex，必须用display: -webkit-box且置于display: flex之前；-webkit-box-flex是权重分配而非占满空间，width/max-width会压制其行为；safari≤14.1中gap压根未实现，需负margin+overflow:hidden等四条件模拟。
旧版 WebKit 内核（如 Android 4.3 及更早、Safari ≤13.1）压根不解析 display: flex，写了等于没写——这不是样式失效，而是整个 Flex 上下文根本没建立。
Android 4.3 及更早：必须用 display: -webkit-box，且顺序不能错
这些设备的 WebView 基于 WebKit 534（2012 年前），连 display: -webkit-flex 都不认识，只认最原始的 display: -webkit-box。它不是“兼容性问题”，是语法层面的不可识别。
-
display: -webkit-box必须写在display: flex前面，且在同一选择器里；漏掉或颠倒顺序，旧安卓直接跳过整条规则 -
-webkit-box-orient: horizontal对应flex-direction: row，但不能写row——它不认这个值 -
-webkit-box-flex: 1是权重分配（比如兄弟项为2，就按 1:2 分剩余空间），不是“占满剩余空间” - 子元素若设了
width或max-width，会直接压制-webkit-box-flex行为，必须删掉或改用min-width
Safari ≤13.1：display: -webkit-flex 是启动开关，不是可选项
Safari 9–13.1 实现的是 2012 年草案，display: flex 被完全忽略。DevTools 里 justify-content 标灰、子项堆成一列，就是引擎根本没进 Flex 模式。
- 必须显式写
display: -webkit-flex，且放在display: flex前面 - 配套属性也要加前缀：
-webkit-flex-direction、-webkit-justify-content、-webkit-align-items、-webkit-flex-wrap -
flex: 1在 iOS 8.4 及更早版本中被彻底跳过，必须拆成-webkit-flex-grow: 1、-webkit-flex-shrink: 1、-webkit-flex-basis: 0 - autoprefixer 默认不输出这些前缀，除非
browserslist明确包含safari >= 9或ios_saf >= 9
gap 在 Safari ≤14.1 中不是“不生效”，是压根不存在
gap 属性在 Safari ≤14.1 的解析器里没有对应 token，写了就静默丢弃。更危险的是 Safari 14.1：@supports (gap: 0) 返回 true，但实际仍忽略，导致降级逻辑完全失效。
- 检测必须用双条件：
@supports (grid-row-gap: 0) and (row-gap: 0)，单条件不可靠 - 手动模拟
gap: 16px需四要素同时满足：overflow: hidden、min-width: 0、box-sizing: border-box、负 margin 均分（容器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 解析极不稳定，常 fallback 到内容宽再算收缩，导致 flex-shrink: 0 形同虚设。
- 实操中必须避免
flex-basis: auto，显式写flex-basis: 0或具体值（如200px） - 对需拉伸的子项，优先用
flex: 1 1 0替代flex: 1，确保三值简写被统一识别 - Chrome DevTools 的 Android 模拟器不可信，必须实测 Android 5.1（WebView 39）、6.0（WebView 44）原生浏览器——它们的渲染逻辑和桌面 Chrome 差两个世代
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
