怎样用SCSS构建一套轻量级的Flexbox弹性盒子CSS库-css教程-PHP中文网

不能只写display: flex，因为IE10/11需-ms-flexbox、旧Safari/Android 4.4需-webkit-box，且display声明必须与对齐属性成套出现，否则不进入Flex上下文；Autoprefixer不生成这两类前缀，须手动硬编码并严格按顺序书写。

怎样用scss构建一套轻量级的flexbox弹性盒子css库

为什么不能只写 `display: flex` 就完事

很多人生成的 Flex 工具类，比如 .flex-row 或 .justify-center，只写了现代属性，漏掉三件事：IE10/11 的 display: -ms-flexbox、旧 Safari/Android 4.4 的 display: -webkit-box，以及最关键的——display: flex 必须和对齐属性成套出现。单独加 justify-content: center 而容器没声明 display: flex，样式完全不生效。这不是浏览器 bug，是 CSS 规则根本没进入 Flex 上下文。

必须手写三套 display 声明，顺序不能错

Autoprefixer 不会补 -ms-flexbox 或 -webkit-box，这些得在 SCSS 里硬编码。而且顺序决定兼容性：

display: -webkit-box 放最前（Safari 6.1–8、Android 4.4）
display: -ms-flexbox 居中（IE10–11），必须在 flex 前面，否则 IE 直接跳过
display: flex 放最后（标准）

例如一个基础容器 mixin：

@mixin flex-row-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

别用参数化 mixin 封装 flex 属性

像 @mixin flex($dir, $jc, $ai) 这种写法看着灵活，实际踩坑率极高：

传参顺序易错（$jc 和 $ai 位置颠倒就白写了）
IE 下属性名不一致：justify-content: space-between 对应的是 -ms-flex-pack: justify，不是 -ms-flex-justify: space-between
Android 4.4 不认 -webkit-flex，只认 -webkit-box，但 -webkit-box-pack: justify 在部分机型上有垂直偏移

正确做法是按高频场景封装固定组合：@mixin flex-row、@mixin flex-col-center、@mixin flex-item-stretch，每个内部显式写出全部兼容写法。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

响应式类必须自带 display 声明，不能靠外层 d-flex 补

比如写个 .md-flex-row-center，如果只在 @media (min-width: 768px) 里写 justify-content: center，而没重复声明 display: flex，那在小屏下它只是普通块元素，媒体查询生效时也不会突然变成 Flex 容器——CSS 不会“升级”已渲染的布局模型。

所以每个响应式 Flex 类都要完整包含 display + 方向 + 对齐：

@media (min-width: $md-breakpoint) {
  .md-flex-row-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

真正容易被忽略的是：Flex 工具类不是“加点样式”，而是“创建上下文”。漏掉 display 声明，等于只画了半张图纸；漏掉 -ms-flexbox，等于在 IE 里交了白卷；把 -webkit-box 写成 -webkit-flex，等于在 Android 4.4 上直接失效。这些不是边缘情况，是上线后真实报错的来源。