不能用.flex()类Mixin自动生成前缀，因Autoprefixer仅处理标准CSS字符串，遇手写-webkit-flex等声明即跳过；IE10/11、微信Android4.3、iOS8–9.3需显式三段式display fallback且顺序不可错，子项属性及对齐属性也须双写，@supports才适合运行时降级。
为什么不能用 .flex() 这类 Mixin 自动生成前缀
Autoprefixer 只在 CSS 字符串层面工作，它不识别 Less 编译期拼出的属性。一旦你在 Mixin 里写 display: -webkit-flex 或 justify-content: -webkit-flex-start，Autoprefixer 就会跳过整条规则——因为它认为这是已手动处理过的“废弃声明”。更糟的是，Chrome 120+ 会把 display: -webkit-flex 当作无效值忽略，而你本意是让它 fallback 给旧 Safari。结果就是：现代浏览器看到废弃前缀报错，旧微信/Android 4.3 却因顺序错乱或缺失 -webkit-box 彻底失效。
必须手写三段式 display fallback，且顺序不能错
IE10/11、微信 Android 4.3、iOS 8–9.3 各自认一套语法，Autoprefixer 对它们完全无感。你得显式写出：
-
display: -webkit-box（Android 4.3 / 微信 6.0 以下） -
display: -webkit-flex（iOS 8–9.3 / Safari 6.1–8） -
display: -ms-flexbox（IE10–11，注意必须在display: flex前） -
display: flex（标准语法，放最后）
顺序颠倒（比如把 -ms-flexbox 放最后），IE 就直接忽略整条声明。别指望 Mixin 自动映射 justify-content: center → -ms-flex-pack: center，硬编码才可靠。
子项属性也得双写，flex: 1 不等于 -webkit-box-flex: 1
低版本微信和 Android WebView 对 flex 简写支持极差，flex: 1 在微信 6.2 早期 X5 内核里基本被无视。必须同步写：
立即学习“前端免费学习笔记（深入）”；
-
-webkit-box-flex: 1（对应flex: 1的伸缩行为） -
-webkit-flex: 1（对应 iOS 8–9.3） -
-ms-flex: 1（对应 IE10–11） -
flex: 1（标准）
对齐属性同理：-webkit-box-pack: center 和 justify-content: center 必须共存；-webkit-box-align: center 和 align-items: center 缺一不可。漏掉任意一层，底部导航栏或弹窗内容就可能错位。
用 @supports 降级，别塞进 Mixin
Mixin 是编译时逻辑，没法做运行时特性检测。把现代语法（如 place-items: center）塞进 Mixin，只会让旧浏览器白屏或错排。正确做法是外层写兼容 fallback，再用 @supports 包裹新语法：
.card {
display: -ms-flexbox;
display: flex;
@supports (place-items: center) {
display: flex;
place-items: center;
}
}
这样 IE10–11 走第一行，Chrome/Firefox/Safari 新版走 @supports 块。最常被忽略的一点：你删了 browserslist 里的 IE >= 11，但手写的 -ms- 前缀还在代码里——它不会自动消失，也不会被 Autoprefixer 清理。
