旧版WebKit内核（Android 4.3及更早、Safari ≤13.1）不支持flex-wrap，Android 4.3的-webkit-box为单行模型且静默忽略flex-wrap声明；Safari 9–13.1需display: -webkit-flex前置并加-webkit前缀，Safari ≤14.1中gap被解析器丢弃而非不生效，min-width: 0是触发换行的关键隐性开关。
旧版WebKit内核（Android 4.3及更早、Safari ≤13.1）根本不支持flex-wrap，写了等于没写——这不是兼容性问题，是语法级缺失。
Android 4.3及更早：-webkit-box不支持换行，必须结构降级
这些设备的WebView基于WebKit 534（2012年前），display: -webkit-box是单行模型，flex-wrap: wrap或-webkit-flex-wrap完全无对应解析逻辑，浏览器静默忽略。
- 常见错误现象：
flex-wrap: wrap声明在DevTools里变灰、子项全部堆成一列、横向滚动条出现 -
-webkit-box只能靠-webkit-box-flex分配剩余空间，但无法触发“新行”概念，所有子项强制单行排列 - 若必须支持，得放弃Flex语义，改用
float: left+width: 33.33%等传统栅格，或用display: table模拟多列 - 别试图加
-webkit-flex-wrap——Android 4.3连这个属性名都不认识，CSS规则整条被跳过
Safari ≤13.1：必须显式启用-webkit-flex，且flex-wrap需前缀
Safari 9–13.1实现的是2012年草案，display: flex被完全忽略，flex-wrap默认不生效，必须手动激活整个Flex上下文。
- 关键写法：
display: -webkit-flex必须放在display: flex之前，且同一选择器内；漏掉或顺序颠倒，Safari直接跳过整条规则 -
flex-wrap: wrap要写成-webkit-flex-wrap: wrap，否则不识别 - 配套属性也要加前缀：
-webkit-flex-direction、-webkit-justify-content、-webkit-align-items -
flex: 1在iOS 8.4及更早版本中被彻底跳过，必须拆成-webkit-flex-grow: 1、-webkit-flex-shrink: 1、-webkit-flex-basis: 0
Safari ≤14.1：gap不存在，但flex-wrap可用——别被@supports骗了
flex-wrap本身在Safari 14.1已支持，但gap仍是空壳：它不是“不生效”，而是解析器压根没有gap这个token，写了就丢弃。
-
@supports (gap: 0)在Safari 14.1返回true，但实际布局中gap被静默忽略——这是个致命陷阱，降级逻辑会完全失效 - 检测必须用双条件：
@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)
真正容易被忽略的底层开关：min-width: 0
无论用-webkit-box-flex还是-webkit-flex，子项默认min-width: auto会锁死收缩能力，导致flex-wrap判定“空间充足”，拒绝换行。
- 只要子项设了
width或max-width，就会压制-webkit-box-flex行为；Safari中min-width: 250px会成为换行的实际门槛 - 文字撑破容器？光写
overflow-wrap: break-word没用，必须配合min-width: 0，否则文本断行逻辑被阻断 - 图标类布局中，
min-width: 0是换行的隐性开关，漏掉它，flex-wrap在窄屏下大概率失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
