应避免使用自动补全前缀的 .flex() mixin，因其输出冗余/冲突声明、无视浏览器支持表、导致渲染不一致及 autoprefixer 失效；正确做法是用 @supports 封装降级结构，并谨慎设计语义化、可开关的 mixin。
别用 .flex() 这类自动补全前缀的 Mixin——它会在现代浏览器里输出冗余甚至冲突的声明，比如 display: -webkit-flex 出现在 Chrome 120+ 中，或 -webkit-gap 让 Safari 15.6+ 直接忽略整条规则。
为什么手写 .flex() Mixin 是危险操作
Less 编译器不理解浏览器支持表，也不读取 browserslist，你删了 IE11 支持，Mixin 里的 -ms-flexbox 还在照常输出。更关键的是：
-
display: -ms-flexbox和display: flex渲染逻辑不一致，混写可能触发 IE11 怪异模式 - Autoprefixer 检测到已有前缀（如
display: -webkit-flex）就会跳过整条属性，导致justify-content或flex-wrap反而没补全 -
gap、place-items等属性压根不支持-ms-前缀，加了反而让整条声明失效
正确做法：只用 @supports 封装降级结构
把标准语法放进 @supports 块，旧引擎 fallback 放外层。Autoprefixer 能识别这种结构并精准补全，且不会污染现代环境：
.card {
display: -ms-flexbox;
display: flex;
@supports (place-items: center) {
display: flex;
place-items: center;
}
}
- 外层
display: -ms-flexbox专供 IE10/11，不带其他 flex 属性（IE 不支持justify-content等） -
@supports内只放真正被目标浏览器支持的新语法，避免硬塞gap到不支持的环境 - 不要在 Mixin 里拼
calc(100% / 3)——Less 编译期不解析运行时函数，会原样输出字符串
如果真要封装 Mixin，必须带开关和语义化参数
例如 .flex-legacy(@ie11: true)，而不是无脑输出所有前缀。调用时显式控制：
.container {
.flex-legacy(@ie11: false); // 只输出 display: flex
.flex-center(); // 仅对齐相关，不含 display 声明
}
- 每个 Mixin 注释里标明适用浏览器，如
// @ie11-support: only for IE 10/11, no modern browsers - 避免把
display和align-items绑死在一个 Mixin 里——不同场景需要不同组合 - 响应式 Flex 布局用断点参数，如
.flex-stack(@breakpoint: md)，而不是在媒体查询里重复写整套 flex 规则
真正起作用的是 Autoprefixer，不是 Less。它只在 CSS 输出阶段按 browserslist 补前缀，而 Mixin 无论怎么封装，都绕不开“静态、不可控、易过时”这个本质缺陷。最容易被忽略的一点：你在 Less 文件里写的任何前缀，都会被 Autoprefixer 当作“已处理”跳过，结果反而出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
