根本原因是工具类未作用于flex直接父容器或父容器未启用display:flex，导致align-self等属性失效；需检查computed中元素直接父级的display值是否为flex或inline-flex。
SCSS 封装的 flex 工具类在部分页面失效，根本原因不是语法写错了，而是 @include 被插在了不参与 Flex 布局的元素上，或父容器未启用 display: flex —— 工具类只负责写属性，不自动“激活” Flex 上下文。
工具类被用在非直接子元素上，align-self 等属性自然无效
SCSS mixin（比如 @mixin flex-center）若被应用到嵌套过深的元素上，而它的父级不是 flex 容器，那所有子项级 flex 属性（如 align-self、flex-grow）都无意义。
- 检查开发者工具中该元素的 computed
display，确认其**直接父元素**是否为flex或inline-flex - 常见误用：
.card-content本身不是 flex 子项，却被加了@include flex-align-end；实际应加在.card（父容器）上，或确保.card是display: flex - 避免跨层调用：不要指望
@include flex-1在孙子节点生效，它只对 flex 直接子项起作用
flex: 1 封装后在 Safari 或微信小程序里塌缩为 0
SCSS 生成的 flex: 1 在旧版 Safari（≤14.1）或微信小程序 WebView 中会被解析为 flex: 1 1 auto，而 flex-basis: auto 在高度未锚定的容器中算出 0，导致子项“消失”。这不是封装问题，是底层引擎行为差异。
- 修复方式不是改 SCSS，而是补全约束：
flex-basis: 0px（不能写0%，Safari 忽略）、min-height: 0（垂直布局）或min-width: 0（水平布局） - 微信小程序中，
scroll-view不支持直接display: flex，必须在外层包一层view再用 mixin，否则整个封装无效 - 若 mixin 输出了
gap: 12px，在 Safari ≤14.1 中会被静默忽略，需配合降级逻辑（负 margin +overflow: hidden），不能只靠 SCSS 输出
全局重置或第三方样式覆盖了封装后的 flex 行为
SCSS 编译后生成的是普通 CSS 规则，一旦遇到更高优先级的声明（比如 * { display: block !important } 或 UI 框架的 .container 类），就会被干掉。尤其在多团队协作项目中，通用类名冲突高发。
- 用开发者工具检查 computed 样式，看
display最终值是不是flex；如果不是，点开“Styles”面板，找哪条规则把它 reset 了 - 避免用泛用名封装，比如
@mixin flex-row输出.row { display: flex }—— 微信小程序基础库或某些组件库自带.row，会覆盖你的定义 - 推荐带命名空间：
@mixin u-flex-row→ 输出.u-flex-row，降低污染风险
最常被忽略的一点：SCSS 封装不解决渲染上下文问题。它再优雅，也填不满一个没设 height 的 flex 容器的交叉轴，也绕不开 Safari 对 flex-basis: auto 的特殊处理。写完 mixin 后，务必在目标页面上验证父容器是否真正“活”着——有明确尺寸、有正确 display、没被意外重置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
