less中用递归mixin生成.flex-justify-*等原子类，避免手写重复；需定义值列表、区分align-items/align-self值域、配合display:flex使用，核心是编译期确定、零运行时开销。
用 for 循环在 Less 中生成 justify-content 值类
Less 本身不支持原生 for，得靠递归 mixin 模拟。关键不是“怎么写循环”，而是避免手写十几行重复类名——比如 .justify-start、.justify-center、.justify-between 等。
实操建议：
- 定义一个值列表：
@justify-values: start, center, end, between, around, evenly; - 用递归 mixin 遍历：每次取第一个值，生成对应 class，再对剩余值递归调用
- 注意：Less 的
extract()和length()是必需的，别漏掉括号里的参数个数检查 - 生成的 CSS 类应带命名空间（如
.flex-justify-*），避免和项目已有类冲突
用同一套逻辑生成 align-items 和 align-self 辅助类
值域不同：align-items 支持 stretch、basis 等，而 align-self 还多 auto；但多数项目只用 start/center/end/stretch 这四个。
实操建议：
- 拆成两个独立 mixin：一个专用于
align-items（含stretch），一个用于align-self（加auto） - 别强行合并——值列表不同，硬塞进同一个循环会导致冗余或漏生成
- 生成类名时区分语义：
.flex-align-items-*vs.flex-align-self-*，否则调试时容易混淆作用对象 - 注意
align-content的值和justify-content高度重合，可复用同一组值，但需单独声明 mixin 调用
为什么不能直接用 CSS 自定义属性 + JS 动态切换
因为这类辅助类本质是「编译期确定」的原子类，目标是零运行时开销、可 PurgeCSS 安全剔除、IDE 可跳转、团队成员一眼看懂含义。
实操建议：
- 自定义属性（
--justify: center）+justify-content: var(--justify)在编译后仍是动态值，无法被 PostCSS 插件识别剔除 - JS 控制类名会引入耦合：组件模板里要写逻辑判断，而不是纯声明式使用
class="flex-justify-center" - 真需要动态对齐？用
[class*="justify-"]这类属性选择器做兜底，但不要把它当成主方案
生成的类必须配合 display: flex 才生效
这是最常被忽略的前提。写了 .flex-justify-center 却没给容器加 display: flex 或 display: inline-flex，样式完全不会触发。
实操建议：
- 在 Less 文件顶部加注释提醒：
// ⚠️ 所有 .flex-* 类均假设宿主元素已设 display: flex / inline-flex - 可额外提供一个基础类：
.flex { display: flex; }和.inline-flex { display: inline-flex; }，降低误用概率 - 别在辅助类里写
display: flex—— 容器可能已是grid或需响应式切换 display 类型，强绑定反而限制灵活性
Flexbox 辅助类的核心价值不在“多”，而在“准”：每个类只干一件事，值可预测，组合可推演。循环生成只是手段，真正容易被忽略的是——你是否为每种对齐场景都预留了对应的语义化类名，而不是靠临时拼凑 justify-content: space-around 写死在组件里。
