autoprefixer 不处理 ie10/11 的 -ms-flexbox 等专属语法，必须手动在 scss 中显式写出 display: -webkit-box、display: -ms-flexbox、display: flex 三套声明，且顺序不可颠倒；-webkit-box 属性与现代 flex 属性名不一致，需硬编码对应关系；mixin 应按高频场景封装固定组合，避免参数化导致错误；响应式逻辑应由调用方控制，而非嵌入 mixin；ie 与 -webkit-box 渲染差异大，二者需共存且不可依赖 autoprefixer 补全。
IE10/11 的 display: -ms-flexbox 必须手动写，Autoprefixer 不会补
Autoprefixer 只补现代属性的前缀（比如 -webkit-justify-content），但对 IE10/11 的专属语法——如 display: -ms-flexbox、-ms-flex-pack、-ms-flex-align——完全不处理。如果你只靠 Autoprefixer，IE10 页面连 Flex 容器都不会渲染出来。
必须在 SCSS 中显式写出这三套声明：
-
display: -webkit-box（Safari 6.1–8、Android 4.4） -
display: -ms-flexbox（IE10–11） -
display: flex（标准）
顺序不能错：老浏览器按声明顺序取第一个有效值，-ms-flexbox 必须出现在 flex 前面，否则 IE 直接跳过。
@mixin flex-row-center 这类语义化封装要固定逻辑，别参数化
传参式 @mixin flex($dir, $jc, $ai) 看似灵活，实际极易传错顺序、漏默认值，还掩盖了 IE 下属性名不一致的事实（比如 justify-content: center 对应的是 -ms-flex-pack: center，不是 -ms-flex-justify）。
正确做法是按高频场景封装固定组合：
-
@mixin flex-row-center专用于容器：内部硬编码-webkit-box-pack: center+-ms-flex-pack: center+justify-content: center -
@mixin flex-item-stretch专用于子项：含-ms-flex-positive: 1、flex: 1和flex-basis: 0%（IE 中flex: 1隐含flex-shrink: 1，易意外收缩） - 每个 mixin 内部必须显式写出所有兼容写法，不依赖 Autoprefixer 推导
旧版 Safari 和 Android 4.4 要用 -webkit-box，不是 -webkit-flex
Android 4.4 WebView 和 Safari 6.1–8 根本不认 display: -webkit-flex，只识别更老的 display: -webkit-box。写了 -webkit-flex，这些设备直接忽略整条规则。
关键差异：
-
flex-direction: row→-webkit-box-orient: horizontal（不是row） -
justify-content: space-between→-webkit-box-pack: justify -
align-items: center→-webkit-box-align: center（但在 Android 4.0 上有垂直偏移 bug，加前缀也修不了） -
flex-wrap: wrap在-webkit-box下完全无效，旧安卓没有换行概念
所以 mixin 里不能只写现代语法再靠 Autoprefixer 补，必须把 -webkit-box 系列属性作为独立分支硬编码进去。
别在 mixin 里嵌套 @media 或拼 calc()
响应式逻辑该由调用方控制，而不是塞进 mixin 里——否则编译后 CSS 体积膨胀、无法复用，且不同断点下的前缀组合可能冲突。
另外，Less/Sass 编译期不执行运行时函数：
-
calc(100% / 3)在 mixin 里会被原样输出，不会计算，最终交由浏览器解析 - 但若你用
#{'calc(100% / 3)'}拼字符串，Sass 4.0+ 会报错：属性名校验变严，#{}不再被允许用于生成属性名 - 真正需要动态计算的地方，应该交给 CSS 自己（比如
flex-basis: calc(100% / 3)），SCSS 只负责包裹兼容写法
复杂点在于：IE10/11 的 -ms-flexbox 和 -webkit-box 渲染逻辑不一致，混写可能触发怪异模式；而 Autoprefixer 又只管标准属性，不管这些老语法——所以 mixin 和 Autoprefixer 不是替代关系，是必须共存的两个环节，且顺序不能反。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
