flex布局失效主因是父容器未真正启用display:flex；@mixin flex-center居中失败常因flex-direction影响对齐轴，应拆分为flex-justify-center和flex-align-center两个语义明确的mixin。
Flexbox 布局在 Sass 中“不生效”或“行为诡异”，90% 的问题出在父容器没真正挂上 display: flex，而不是 mixin 写得不够 fancy。
为什么 @mixin flex-center 有时居中失败？
它常被默认理解为“内容绝对居中”，但 CSS 中 justify-content 和 align-items 的作用轴取决于 flex-direction。如果父容器是 column，那“水平居中”实际由 align-items 控制，而 justify-content 反倒管垂直方向。
- 别用单个
@mixin flex-center模糊封装——语义不清，容易在flex-direction: column场景下反向生效 - 拆成两个明确职责的 mixin：
@mixin flex-justify-center（只设justify-content: center）和@mixin flex-align-center（只设align-items: center） - Safari 旧版本对
align-content: center（多行 flex）支持差，单行布局一律优先用align-items
display: flex 被静默覆盖的常见原因
DevTools 里看到 computed 样式没有 display: flex？不是 Sass 编译错了，而是它被其他声明干掉了。
-
display: inline或display: none会直接让display: flex失效——Sass 生成的样式再准也没用 - 同一元素上同时写了
float: left和display: flex：后者会被降级为display: block（尤其在老浏览器中） - 父容器本身是
position: absolute或position: fixed且未设宽高，可能导致子 flex 容器无法计算主轴尺寸，justify-content看似无效
用 @mixin 封装时必须显式处理的默认值
Sass 不会自动补全 Flexbox 的隐式默认值，比如 flex-direction: row。一旦你漏掉，又恰好父级有全局重置，就可能意外变成 column。
- 所有 flex 相关 mixin 都应显式声明
flex-direction，哪怕只是写flex-direction: row - 避免依赖浏览器默认值，尤其是跨项目复用时——不同团队的 reset.css 可能重置了
flex-direction - 若需垂直布局，用
@mixin flex-column-center这类带方向语义的名称，而非泛泛的 “center”
响应式 flex 布局中 flex-basis 的坑
用 flex: 1 1 25% 实现四列布局时，移动端切到 flex-direction: column 后，flex-basis: 25% 仍按宽度解析，但此时它已无意义，反而可能引发高度计算异常。
- 响应式切换方向时，同步重置
flex-basis：比如@media (max-width: 768px) { @include flex-column; flex-basis: auto; } - 避免在
flex: 1后硬写flex-basis百分比——它和flex-wrap: wrap组合时，在某些 Safari 版本中会触发换行错位 - 优先用
gap控制间距，别靠margin——gap在flex-wrap下表现稳定，margin容易导致最后一行对不齐
最易被忽略的一点：Sass mixin 生成的样式再优雅，也救不了一个被 float 或 display: inline 覆盖的父容器。调试 Flex 布局，永远先看 computed 样式里的 display 值，而不是立刻怀疑 mixin 写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
