IE10/11需手动声明display: -ms-flexbox及-ms-flex-pack/-ms-flex-align等专属属性，仅靠Autoprefixer无法覆盖；必须用@mixin封装固定组合并严格区分容器与子项逻辑，同时保留-webkit-box等旧前缀以兼容Safari 6.1–8和Android 4.4。
直接写 display: flex 在现代浏览器里没问题，但 IE10/11、旧版 Safari 和 Android 4.4 WebView 仍需前缀；光靠 Autoprefixer 不够——它不处理 flex-wrap、align-items 等属性在 IE 中的等价写法，更不会把 justify-content: space-between 自动转成 -ms-flex-pack: justify。必须手动用 @mixin 封装语义化组合，并严格区分容器与子项逻辑。
IE10/11 的 -ms-flexbox 怎么写才不崩溃
IE10–11 只认 display: -ms-flexbox，且语法和现代 Flex 完全不同：没有 gap，justify-content 得写成 -ms-flex-pack，align-items 对应 -ms-flex-align，flex-wrap: wrap 根本不支持。
- 容器必须同时声明三套 display：
display: -webkit-box（Safari 6.1–8）、display: -ms-flexbox（IE10–11）、display: flex（标准） -
justify-content: center→ 同时加-webkit-box-pack: center和-ms-flex-pack: center -
align-items: center→ 同时加-webkit-box-align: center和-ms-flex-align: center - 别碰
flex-wrap：IE 下无效，真要换行得靠width+min-width: 0配合flex: 1挤出空间
@mixin flex-row-center 这类语义化封装怎么避免冗余和冲突
参数化 @mixin flex($dir, $jc, $ai) 看似灵活，实际调用时极易传错顺序、漏默认值，还掩盖了 IE 下属性名不一致的事实。应该按高频场景封装固定组合。
- 命名带作用域：
@mixin flex-row-center明确只用于容器，@mixin flex-item-stretch专用于子项 - 每个 mixin 内部必须显式写出所有兼容写法，例如
-ms-flex-pack: center不能省略，哪怕 Autoprefixer 已配好 browserslist - 避免在 mixin 里嵌套
@media：响应式逻辑应由外层调用方控制，否则编译后 CSS 体积膨胀且无法复用 - 慎用
flex: 1缩写——它隐含flex-shrink: 1，在 IE 中可能引发意外收缩，建议拆成flex-grow: 1; flex-basis: 0%并补前缀
为什么 @mixin 和 autoprefixer 必须共存，且顺序不能反
Sass 的 @mixin 是“强制输出”，Autoprefixer 是“按需修补”。前者解决 IE 专属语法（如 -ms-flex-pack），后者补现代属性的前缀（如 -webkit-transform）。两者不是替代关系。
立即学习“前端免费学习笔记（深入）”；
- 如果只用
@mixin但没接 Autoprefixer，iOS 14.5 Safari 会缺-webkit-clip-path导致白屏 - 如果只用 Autoprefixer 但没写
@mixin，IE10 页面直接不渲染 Flex 容器（因为display: flex被忽略，又没 fallback） - Autoprefixer 会删掉
@mixin里多余的前缀：比如你写了-moz-flex-direction，但 browserslist 里没 Firefox，它就会清理掉 - 验证方式唯一：看最终输出的 CSS 文件里，IE 相关属性是否完整存在，且无重复或遗漏
最易被忽略的是 flex-direction: column-reverse 这类值——现代浏览器支持，但 IE 完全不认，也不存在等价前缀写法；遇到就得降级为 JS 控制 DOM 顺序，或者改用绝对定位兜底。Mixin 封装再完善，也跨不过浏览器能力断层。
