怎么在SCSS中编写可复用的CSS Flexbox居中Mixin？-css教程-PHP中文网

ie10/11需手动书写-ms-flexbox等私有语法，autoprefixer不支持；必须按顺序声明-webkit-box、-ms-flexbox、flex，并显式设置flex-basis: 0%等兼容性关键属性。

怎么在scss中编写可复用的css flexbox居中mixin？

IE10/11 的 `display: -ms-flexbox` 必须手动写，Autoprefixer 不会补

只靠 Autoprefixer 生成的 CSS 在 IE10/11 里根本不会渲染 Flex 容器——它完全不处理 -ms-flexbox、-ms-flex-pack、-ms-flex-align 这类专属语法。你必须在 SCSS 中显式写出三套声明：

display: -webkit-box（Safari 6.1–8、Android 4.4）
display: -ms-flexbox（IE10–11）
display: flex（标准）

顺序不能错：-ms-flexbox 必须在 flex 前面，否则 IE 直接跳过整条规则；-webkit-box 要放在最前，因为旧 Android WebView 和 Safari 6.1–8 根本不认 -webkit-flex。

`@mixin flex-row-center` 这类语义化封装要固定逻辑，别参数化

传参式 @mixin flex($dir, $jc, $ai) 看似灵活，实际极易出错：

IE 下属性名不一致：justify-content: center 对应的是 -ms-flex-pack: center，不是 -ms-flex-justify
-webkit-box-pack: justify 才对应 justify-content: space-between，不是 space-between 字面值
漏默认值、传错顺序、覆盖不到旧版 Safari 的 -webkit-box-orient: horizontal 都会导致布局崩塌

正确做法是按高频场景硬编码组合：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

@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;
}