IE10/11需手动书写-ms-flexbox等私有语法，Autoprefixer不支持；必须按顺序声明-webkit-box、-ms-flexbox、flex，并显式设置flex-basis: 0%等兼容性关键属性。
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都会导致布局崩塌
正确做法是按高频场景硬编码组合：
立即学习“前端免费学习笔记（深入）”；
@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-item-stretch 时要注意 flex-basis: 0%
IE10/11 中 flex: 1 隐含 flex-shrink: 1，容易导致子项意外收缩；而 -ms-flex-positive: 1 又不等价于现代 flex-grow。所以必须显式拆解：
-ms-flex-positive: 1flex: 1-
flex-basis: 0%（关键！防止 IE 下基线计算错误）
漏掉 flex-basis: 0%，旧版 IE 里子项可能高度异常或无法撑满容器。
响应式逻辑交给调用方，别塞进 mixin 里
Mixin 是样式复用单元，不是逻辑控制器。比如断点适配、折叠动画、Safari 下的 min-width: 0 和 flex-shrink: 0 防错位，都该由具体组件决定：
- 导航菜单在
$nav-breakpoint: 576px换行？那是业务逻辑，不是 Flex 本身的事 - 侧边栏展开宽度用
$nav-sidebar-width: 240px？那是设计约束，不该混进@mixin flex-row-center - Flex 容器内子项是
img？调用方得自己加max-width: 100%，mixin 不该越界
把响应式塞进 mixin，等于把 layout 和 behavior 绑死，后续改断点、换动效、修 Safari bug 全得重写 mixin——这才是最常被忽略的维护成本。
