应拆分为@mixin flex-container和@mixin flex-item两个独立封装，前者支持方向、换行、主轴/交叉轴对齐等参数并设默认值，后者避免硬编码flex缩写、默认$basis: auto，响应式通过断点参数集成，禁用@extend而坚持@include调用。
用 @mixin 封装 flex 容器和项目常用配置
直接写 display: flex 很快，但每次都要重复设 flex-direction、justify-content、align-items，一改全崩。用 @mixin 把高频组合打包成可参数化调用的块，才是可持续写法。
常见错误是把所有属性塞进一个大 mixin，结果调用时要么传一堆 null，要么漏参数导致样式错乱。更稳妥的做法是拆成两个：一个管容器（flex-container），一个管子项（flex-item）。
-
@mixin flex-container($direction: row, $wrap: nowrap, $justify: flex-start, $align: stretch)—— 所有参数带默认值，覆盖 90% 布局场景 -
@mixin flex-item($grow: 0, $shrink: 1, $basis: auto)—— 避免手写flex: 0 1 auto这种易错缩写 - 别在 mixin 里硬编码
display: flex的 vendor prefix；现代浏览器已无需-webkit-box等前缀，加了反而干扰调试
响应式 flex 布局怎么避免媒体查询嵌套爆炸
很多人在每个 @include flex-container 外套一层 @media，结果文件里全是重复断点逻辑。真正省力的做法是让 mixin 支持断点参数，把响应逻辑收口。
比如定义一个 $breakpoints: (sm: 576px, md: 768px, lg: 992px)，然后扩展 mixin：
立即学习“前端免费学习笔记（深入）”；
@mixin flex-container-responsive($direction: row, $breakpoint: null) {
@include flex-container($direction);
@if $breakpoint != null and map-has-key($breakpoints, $breakpoint) {
@media (min-width: map-get($breakpoints, $breakpoint)) {
@include flex-container($direction);
}
}
}
调用时只需：@include flex-container-responsive(row, lg)。注意：不要在 mixin 内部做复杂条件判断（如根据方向自动切列/行），那会掩盖真实布局意图，后期维护时反而更难定位问题。
为什么 flex: 1 在某些场景下不生效？
这不是 Sass 问题，但写 Sass 时若没意识到底层 CSS 行为，封装出来的 mixin 会埋雷。flex: 1 实际等价于 flex: 1 1 0%，而 0% 会让元素“放弃自身内容宽度”，在文字未换行、图片无 max-width 时，极易撑破容器。
- 在
@mixin flex-item中，$basis参数建议默认设为auto而非0或0% - 如果真需要等分，显式写
flex: 1 1 0并配合min-width: 0（防止文本溢出） - Sass 无法自动注入
min-width: 0—— 这个必须手动加到调用处或另建@mixin flex-item-fill专用版本
用 @extend 复用 flex 类名的风险
有人图省事写 %flex-row 然后 @extend %flex-row，看似干净，实则破坏样式隔离性。Sass 的 @extend 会把所有引用该占位符的选择器合并输出，一旦某处修改了 %flex-row，所有 extend 它的地方都会被连带影响，且难以追踪。
更可控的方式是坚持用 @include，哪怕多敲几行。如果真想减少重复，可用 @function 提取计算逻辑（例如根据栅格列数算 flex-basis 百分比），但绝不拿 @extend 当复用主力。
另外，CSS 自定义属性（--flex-gap）和 Sass 变量混用时容易混淆作用域——Sass 变量编译时即确定，而 CSS 变量运行时才解析。别试图用 Sass 变量去“动态生成” CSS 变量名，那只会让调试器里看到一堆无效声明。
