应按用途语义化封装@mixin，如flex-row-center，而非通用参数化写法；需避免参数顺序错误、默认值干扰、意图不明确等问题，子项mixin须带-item-后缀，注意ie兼容与编译体积。
直接封装语义化 @mixin 比写一堆重复的 display: flex + justify-content 更省事、更少出错，但必须按用途命名、避免参数泛化，否则反而增加理解成本和调用风险。
为什么不能用 @mixin flex($dir, $jc, $ai) 这类通用参数化写法
这类写法表面灵活，实际在项目里极易踩坑：
- 传参顺序错一位（比如把
center传给$dir）编译不报错，但生成的是flex-direction: center—— CSS 无效，浏览器静默忽略 - 默认值难设计：90% 场景用
align-items: stretch（浏览器默认），显式写出来反而干扰阅读；而column-reverse这种冷门值又极少用，却要每次传参兜底 - 调用时得翻文档确认参数顺序，封装本意是降认知负担，结果反增负担
- 无法体现意图，
@include flex(row, center, flex-start)看不出这是“水平居中+顶部对齐”，后期维护者得重读 CSS 才能理解
推荐按用途封装：命名即意图，调用即所见
每个 @mixin 对应一个高频布局意图，不暴露底层属性名，只暴露业务语义：
-
@mixin flex-row-center→ 水平排列 + 主轴居中 + 交叉轴居中（最常用居中容器） -
@mixin flex-col-between→ 垂直排列 + 主轴两端对齐（如表单页头/尾/主体分离） -
@mixin flex-item-self-end→ 仅作用于子项，覆盖容器级align-items，明确带-item-后缀 - 需要响应式？直接在 mixin 内嵌
@media，例如@mixin flex-row-center-mobile里写@media (max-width: 768px) { ... }，别把断点逻辑甩给调用方
子项对齐封装要特别注意层叠与兼容性
子项的 align-self、margin: auto、flex-grow 容易和容器设置冲突，尤其当父容器已设 align-items: center 时：
- 避免用
margin: auto封装居中：它在flex-direction: column下不生效，且和align-self优先级关系模糊 -
@mixin flex-item-fill若含flex: 1，必须同步加min-width: 0（防文字撑宽），这个细节必须写死在 mixin 体内，不能靠人肉补 - 别封装
flex: 0 0 auto成@mixin flex-none：它在 IE 中不等价于flex-shrink: 0，会导致子项意外收缩 - 所有子项专用 mixin 必须带
-item-后缀（如flex-item-center），一眼区分作用域，避免误用于容器
编译体积和类名冲突容易被忽略
每个 @include 都会原样输出全部规则，Sass 不做去重：
- 若多个组件都
@include flex-row-center，生成的 CSS 会重复多份，无压缩时体积明显膨胀 - 若同时引入 Tailwind 或其他工具类库，自动生成的
.flex-x-center类名可能和第三方冲突，建议统一前缀（如.u-flex-row-center）或改用私有命名空间 - IE11 兼容需手动加
-ms-前缀（如-ms-flex-pack: center），Sass 自动补前缀插件（Autoprefixer）已不支持 IE，得自己加或弃用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
