应使用语义化命名的less mixin封装flex布局，如.flex-row()、.flex-col-center()，每个仅绑定一个明确意图；不堆参数、不硬编码flex-wrap、响应式断点需作为参数抽象，容器与项目属性须分离，兼容性交由autoprefixer处理。
用语义化命名固定高频组合，别堆参数
直接把 .flex-row()、.flex-col-center() 这类 Mixin 当成布局“动词”来用，每个只绑定一个明确意图：方向 + 主轴对齐 + 交叉轴对齐。比如 .flex-col-center() 就是 flex-direction: column; justify-content: center; align-items: center，不多不少。
常见错误是写个万能 .flex(@dir, @jc, @ai)，结果每次调用都要填三个值，反而比手写还麻烦；更糟的是，后期想统一改所有列向居中容器的 justify-content，得全局搜参数调用，没法批量替换。
推荐做法：
-
.flex-row()→flex-direction: row; justify-content: flex-start; align-items: stretch -
.flex-between()→ 只改主轴对齐，不碰方向和交叉轴，方便叠加使用：.flex-row().flex-between() - 不把
flex-wrap写死在基础 Mixin 里——导航栏通常不换行，卡片列表才需要，留作显式调用：.flex-row-wrap()
响应式断点必须作为 Mixin 参数，别硬编码媒体查询
写两套分离的规则（比如 PC 端一个 .nav { display: flex; }，移动端再套一层 @media (max-width: 768px) { .nav { flex-direction: column; } }）等于主动放弃维护性。改个对齐方式就得同步改两处，漏一次就出视觉 bug。
正确做法是把断点抽象成参数，配合变量管理像素值：
.flex-stack(@breakpoint: md) {
.flex-col();
@media (max-width: @bp-@{breakpoint}) {
.flex-row();
}
}
再定义：@bp-md: 768px;。调用时写 .flex-stack(md)，语义清晰，且全局调整断点只需改一行变量。
注意：@bp-@{breakpoint} 中的 @{breakpoint} 必须用花括号包裹，否则 Less 无法拼接变量名；也别在 Mixin 里写 calc(100% / 3)，Less 编译期不识别运行时函数，会报 Operation on an invalid type。
项目级属性必须独立抽离，别和容器混写
子项的 flex、align-self、order 和容器无关。把它们塞进容器 Mixin 里，等于强行耦合——改个 logo 的对齐方式，得去动 .header 的定义，违反单一职责。
单独封装项目级 Mixin，调用时自由组合：
-
.flex-1()→flex: 1 1 0% -
.self-end()→align-self: flex-end -
.order-2()→order: 2
这样写，.header__logo.self-end 就很自然，也方便后续接入 BEM 命名规范。容器类和项目类职责彻底分离，改哪层就动哪层。
兼容性交给 Autoprefixer，Mixin 别手动加前缀
Less Mixin 不该也不负责生成 -webkit-flex 或 -ms-flexbox。这类手写前缀 Mixin 在现代项目里是危险操作：Chrome 120+ 会多出无效声明，Safari 15.6+ 可能忽略整条 -webkit-gap，IE10/11 的 -ms- 实现和现代 display: flex 渲染逻辑不一致，混写可能触发怪异模式。
真正起作用的是 Autoprefixer，它必须在构建链路中紧接 less-loader 之后、css-loader 之前，并通过 postcssOptions 显式启用，同时 browserslist 配置要真实反映目标环境（如 "IE >= 11"）。
Less 中唯一值得保留的兼容相关封装，是 @supports 降级兜底结构：
.card {
display: -ms-flexbox;
display: flex;
@supports (place-items: center) {
display: flex;
place-items: center;
}
}
这种写法能被 Autoprefixer 正确识别并补全旧引擎所需版本。所有 Mixin 若需兼容 IE11，必须暴露开关参数（如 .flex-legacy(@ie11: true)），并在注释中明确标注仅用于 target: "IE 11"。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
