直接为每种 flex-direction、justify-content 和 align-items 组合写类会导致类名爆炸；SCSS 中需用 @if 判断 $ai == center 来省略后缀，避免冗余；响应式类须确保父容器有 display: flex；align-self 类需独立声明且不依赖父容器 align-items。
为什么直接写 flex-direction 和 justify-content 类不够用
手动为每种 flex-direction（row/column 等）搭配每种 justify-content（center/space-between 等）和 align-items（start/end/center 等）写类，很快就会爆炸到上百个。更麻烦的是：align-items: center 在类名里常被省略（如 flex-x-center），但 align-items: flex-end 就必须显式写出（如 flex-x-center-end）——这种不一致让开发者总得翻文档或猜命名逻辑。
@each 循环生成类名时，如何处理 center 的隐式规则
SCSS 里不能靠“约定”自动省略 center，必须在循环中做条件判断。关键点是：当 $ai（交叉轴对齐值）等于 center 时，不拼接后缀；否则才加入 -#{$AI}。否则会生成一堆冗余的 flex-x-center-center 类。
-
$alignItemsList必须包含center，且要和flex-start、flex-end同级参与循环 - 用
@if ($ai == center)分支控制类名拼接逻辑，不能只靠变量映射 - 注意
center对应的原始 CSS 值是center，不是flex-center；而flex-start才对应缩写start
响应式前缀怎么和 Flex 工具类安全组合
Bootstrap 的 md-justify-content-center 能生效，前提是父容器已启用 display: flex。纯 SCSS 生成的工具类如果没带 d-flex 或等效声明，加了 md-flex-x-center 也无效——因为 Flex 上下文不存在。
- 所有生成的类都必须包含
display: flex，不能只靠外部类注入 - 响应式前缀（如
md-）需在循环外层包裹@media (min-width: 768px)，不能只改类名 - 别把
flex-wrap: wrap硬塞进每个类——它和对齐无关，应单独提供flex-wrap-*工具类
align-self 类为什么不能无脑套用
align-self 只对 Flex 子项生效，且会被父容器的 align-items 覆盖。如果你生成了 self-center 类，但父容器是 flex-x-start（即 align-items: flex-start），那 self-center 就不会起作用——除非显式写 align-self: center。
- 子项类名必须独立于容器类名存在，不能依赖容器“允许”它生效
- 生成
self-*类时，务必在 CSS 规则里写死align-self: ...，而不是靠继承或覆盖 - 避免和
mt-auto/mb-auto混用：前者是轴对齐，后者是 margin 推挤，行为逻辑不同，叠加不会增强效果
真正难的不是循环本身，而是搞清哪些值必须显式声明、哪些可以省略、哪些会相互覆盖。比如 flex-x-center 隐含 align-items: center，但 flex-y-center 隐含的却是 align-items: center 在水平轴上——这个“隐含”的方向，得靠 flex-direction 值动态反推，不能硬编码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
