Less本身不处理Flex兼容性，真正起作用的是Autoprefixer——它在CSS输出阶段按browserslist精准注入必要前缀，而手写.flex()等Mixin会导致冗余、冲突及渲染异常。
Less 本身不处理 Flex 兼容性，也绝不该靠 Mixin “自动补全”前缀——这会引入冗余、冲突甚至渲染异常。真正起作用的是 Autoprefixer，在 CSS 输出阶段按 browserslist 精准注入必要前缀。
为什么 .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 写得多漂亮。
-
postcss-loader必须紧接在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 降级兜底
Mixin 不该生成前缀，但可以安全包裹现代语法的 fallback 结构 —— 这种写法能被 Autoprefixer 正确识别并补全旧引擎所需版本。
立即学习“前端免费学习笔记（深入）”；
- 把标准语法放
@supports块内，前缀版本放外层，例如：.card {<br> display: -ms-flexbox;<br> display: flex;<br> @supports (place-items: center) {<br> display: flex;<br> place-items: center;<br> }<br>} - 所有 Mixin 必须暴露开关参数，如
.flex-legacy(@ie11: true)，并在注释中标明仅用于target: "IE 11" - 避免在 Mixin 里拼
calc(100% / 3)—— Less 编译期不识别运行时函数，报Operation on an invalid type
真正容易被忽略的点：Autoprefixer 是否生效，和 Less 文件里写了多少 .flex-row() 完全无关；它只看你最终输出的 CSS 是否经过 PostCSS 流水线，以及 browserslist 是否与实际用户环境对齐。一旦构建配置出错，再语义清晰的 Mixin 也救不了兼容性问题。
