不推荐直接用 display: flex 写对齐，因重复声明 justify-content、align-items 等属性导致冗余难维护，尤其响应式下多断点反复写同一逻辑会增大 CSS 体积和出错率。
为什么直接用 display: flex 写对齐不推荐？
因为重复写 justify-content、align-items、flex-direction 等属性，既冗余又难维护。尤其在响应式场景下，不同断点要反复声明同一组对齐逻辑，CSS 体积和出错率都会上升。Less 的参数化混合（.flex-align()）能收敛这些重复，但要注意：它不能替代语义化类名，也不该覆盖组件内部的 flex 布局逻辑。
如何用 Less 混合封装基础对齐类？
核心是把对齐方向、主轴/交叉轴行为、是否换行等维度拆成可组合的参数。避免写死值，用变量控制默认行为：
.flex-align(@justify: center, @align: center, @direction: row, @wrap: nowrap) {
display: flex;
justify-content: @justify;
align-items: @align;
flex-direction: @direction;
flex-wrap: @wrap;
}
使用时直接调用：.flex-align(flex-start, stretch, column, wrap)。注意：@wrap 默认设为 nowrap 更安全，因为多数容器不需要换行；@align 默认用 center 而非 stretch，避免子元素意外撑高父容器。
怎样生成预设类名（如 .flex-jc-center）？
靠循环 + 映射表生成类名，比手写几十个类更可靠。Less 不支持原生 map 遍历，但可用「守卫 + 多重定义」模拟：
立即学习“前端免费学习笔记（深入）”；
.make-flex-classes() {
.jc(center) { justify-content: center; }
.jc(flex-start) { justify-content: flex-start; }
.jc(flex-end) { justify-content: flex-end; }
.ai(center) { align-items: center; }
.ai(stretch) { align-items: stretch; }
.fd(row) { flex-direction: row; }
.fd(column) { flex-direction: column; }
}
.flex-jc-center { .jc(center); }
.flex-ai-stretch { .ai(stretch); }
.flex-fd-column { .fd(column); }
关键点：类名前缀统一用 flex-，后缀用缩写（jc/ai/fd），避免歧义；不生成所有排列组合（比如 .flex-jc-center-ai-stretch），防止类名爆炸——真需要多属性组合时，直接在 HTML 里并列写多个类更清晰。
响应式对齐类怎么加才不混乱？
用媒体查询嵌套混合，但只针对明确断点（如 @tablet、@desktop），不搞「每种对齐都配三套」。例如：
.flex-jc-center@mobile {
justify-content: center;
}
@media (min-width: 768px) {
.flex-jc-center@mobile {
justify-content: flex-start;
}
}
更推荐做法：用 BEM 风格命名，如 .flex--jc-center@sm，配合变量统一管理断点值。切记：不要在混合里硬编码 @media，否则无法被其他样式覆盖；所有响应式类必须显式加 display: flex，否则在小屏可能失效。
真正难的是对齐行为与内容语义的耦合——比如一个卡片列表用 .flex-ai-center 后，图标和文字高度不一致导致视觉偏移，这时得回退到子元素微调，而不是堆砌更多辅助类。
