手写 .flex() mixin 在现代项目中是危险操作，因其导致冗余前缀、渲染异常、破坏 autoprefixer 工作，且无法响应 browserslist 和 @supports；正确方案是通过构建链路（less-loader → postcss-loader + autoprefixer）自动加前缀，并用 @supports 安全降级。
Less 本身不处理 Flexbox 兼容性，手写 .flex() 这类 Mixin 不仅无效，还会引入冗余声明、渲染异常甚至破坏 Autoprefixer 的正常工作。
为什么 .flex() Mixin 在现代项目里是危险操作
常见错误现象包括：display: -webkit-flex 被输出到 Chrome 120+ 页面中，DevTools 显示三条 display 声明但后两条完全无效；gap 被加上 -webkit-gap，Safari 15.6+ 直接忽略整条规则。
- IE10/11 的
-ms-flexbox和现代display: flex渲染逻辑不一致，混写可能触发怪异模式 - Autoprefixer 检测到已存在前缀（如
display: -webkit-flex）就会跳过整条属性，导致flex-wrap或justify-content反而没补全 - Less 编译时无法读取
browserslist，你删了 IE11 支持，Mixin 里的-ms-还在默默输出 - 手写 Mixin 无法响应运行时特性（如
@supports (display: grid)），只能硬编码 fallback
正确接入 Autoprefixer 的构建链路必须满足三个条件
Webpack 或 Vite 项目中，前缀是否生效只取决于流水线是否完整接通，而不是 Mixin 写得多漂亮。
- 必须紧接在
less-loader之后、css-loader之前——顺序错则 CSS 永远不会进 Autoprefixer -
postcss-loader的options.postcssOptions.plugins必须显式启用autoprefixer，不能只写['autoprefixer']而漏掉postcssOptions层级 -
browserslist配置必须真实反映目标环境，例如："browserslist": ["last 2 versions", "not dead", "IE >= 11"]；混用逻辑（如"last 2 versions, not dead"）会导致结果不可预测
Less 中唯一值得保留的 Flex 兼容封装：@supports 降级兜底
不该生成前缀，但可以安全包裹现代语法的 fallback 结构——这种写法能被 Autoprefixer 正确识别并补全旧引擎所需版本。
- 把标准语法放
@supports块内，前缀版本放外层，例如：.card { display: -ms-flexbox; display: flex; @supports (place-items: center) { display: flex; place-items: center; } } - 所有 Mixin 必须暴露开关参数，如
.flex-legacy(@ie11: true)，并在注释中标明仅用于target: "IE 11" - 避免在 Mixin 里拼
calc(100% / 3)——Less 编译期不识别运行时函数，报Operation on an invalid type
真正容易被忽略的是：Autoprefixer 不是“开了就完事”，它只对最终输出的 CSS 生效；而 Less 编译器根本不看浏览器支持表，也不理解 @supports 的语义——它只是原样输出。所以任何兼容性逻辑，都必须落在构建链路的最后一步，而不是提前塞进预处理器里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
