如何用Sass编写可复用的CSS弹性盒模型代码？-css教程-PHP中文网

应拆分为@mixin flex-container和@mixin flex-item两个独立封装，前者支持方向、换行、主轴/交叉轴对齐等参数并设默认值，后者避免硬编码flex缩写、默认$basis: auto，响应式通过断点参数集成，禁用@extend而坚持@include调用。

如何用sass编写可复用的css弹性盒模型代码？

用 `@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 内部做复杂条件判断（如根据方向自动切列/行），那会掩盖真实布局意图，后期维护时反而更难定位问题。