ie10/ie11中flex-wrap: wrap完全无效，连-ms-flex-wrap也无效，必须改用font-size: 0 + inline-block + calc()模拟换行，并注意消除空白间隙、精确计算宽度（含border/padding）、避免33%等整数百分比引发的累计误差。
IE10/IE11里flex-wrap: wrap完全没反应
写了flex-wrap: wrap但子项死活不换行，DevTools里该属性被划掉（strikethrough），控制台却无报错——这不是bug，是IE10/11压根没实现这个属性。连-ms-flex-wrap: wrap也无效，浏览器直接忽略整条声明。
必须放弃flex-wrap，改用inline-block模拟：
-
font-size: 0写在父容器上，消除inline-block元素间的空白间隙 - 子项宽度用
calc(33.333% - 2px)这类带减法的表达式，预留边距空间，避免累计误差撑破行 - 别写
width: 33%——IE对小数百分比计算更敏感，容易多出0.01px导致意外换行 - 子项若有
border或padding，务必在calc()中一并减去，例如width: calc(50% - 12px)
Android 4.3及更早：display: -webkit-box不支持换行
旧安卓WebView（≤4.3）内核只认display: -webkit-box，且它是纯单行模型。flex-wrap: wrap、-webkit-box-lines: multiple全都不被识别——写了等于白写，也不会报错，只是安静失效。
需要多行布局时，不能靠CSS，得换思路：
- 用媒体查询配合
display: block切换为传统流式布局 - 用JS检测容器宽度，动态拆分DOM结构（比如每行3个子项就插入
<div class="row"></div>） - 放弃自动换行，改用固定列数+
overflow-x: auto横向滚动 - 绝对不要给
display: -webkit-box容器加flex-wrap——它不解析，也不fallback
Safari ≤14.1的gap陷阱：@supports (gap: 0)会骗人
@supports (gap: 0)在Safari 14.1里返回true，但实际gap在flex容器中仍被跳过。这是“伪支持”，降级逻辑被绕过，布局直接错位。
用负margin模拟gap必须同时满足四点：
-
overflow: hidden（防内容溢出导致意外滚动） -
min-width: 0（防子项默认不收缩，加padding后撑宽溢出） -
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)
Autoprefixer不会帮你生成-webkit-box-flex
Autoprefixer v10+已移除对-webkit-box的支持。即使你配置了browserslist: ["android 4.3"]，它也不会输出-webkit-box-flex: 1或-webkit-box-pack: center。
要兼容老安卓，必须手动补全：
-
display: -webkit-box必须放在display: flex前面，顺序颠倒或漏掉任一行，旧安卓直接退化成display: block -
-webkit-box-flex: 1不是“占满剩余空间”，而是权重值；兄弟项设-webkit-box-flex: 2，它们按1:2分配剩余宽度 - 子项若设了
width或max-width，会直接压制-webkit-box-flex行为，必须删掉或改用min-width -
-webkit-box-orient: horizontal对应flex-direction: row，但不能写row——它不识别
真正容易被忽略的是min-width: 0：flex子项默认不收缩，加上padding后极易在窄屏下溢出容器，而这个值在绝大多数降级方案里都被漏掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
