必须手动显式写出display: -webkit-box、display: -ms-flexbox、display: flex三套声明且顺序不可颠倒；Autoprefixer不处理IE10/11和旧Safari的专属语法，参数化mixin易出错，应按高频场景封装固定组合。
别写参数化 @mixin flex($dir, $jc, $ai) —— 它在 IE10/11 和旧 Safari 下必然出错，且 Autoprefixer 不会帮你修。
必须显式写出三套 display 声明，顺序不能错
IE10/11 只认 display: -ms-flexbox，Safari 6.1–8 和 Android 4.4 只认 display: -webkit-box，现代浏览器用 display: flex。Autoprefixer 完全不处理这三者，必须手写。
-
display: -webkit-box必须在最前：老 Safari 按顺序取第一个有效值 -
display: -ms-flexbox必须居中：IE10/11 若看到flex在前，直接跳过整条规则 -
display: flex放最后：确保现代引擎用标准语法
正确写法：
@mixin flex-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
-webkit-box 和 -ms-flexbox 的属性名不兼容，不能靠参数映射
比如 justify-content: space-between 对应的是 -webkit-box-pack: justify 和 -ms-flex-pack: justify，不是 -webkit-justify-content 或 -ms-flex-justify —— 后两者根本无效。
立即学习“前端免费学习笔记（深入）”；
-
-webkit-box-orient: vertical≠flex-direction: column；前者是horizontal/vertical，后者是row/column -
-ms-flex-align: center对应align-items: center，但-ms-flex-pack才管主轴对齐 - 传参式 mixin 如
@mixin flex($jc)极易把$jc: "center"错映射成-ms-flex-justify: center，导致 IE 渲染失败
安全做法是按高频场景封装固定组合：
@mixin flex-row-center {
@include flex-row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
子项伸缩行为在 IE 中和现代 Flex 不一致，flex: 1 要拆开写
IE10/11 下 flex: 1 隐含 flex-shrink: 1，容易意外收缩；而 flex: 1 1 0% 才真正等价于现代 flex: 1。
- 必须显式写
-ms-flex-positive: 1（对应flex-grow） -
-ms-flex-preferred-size: 0%是flex-basis: 0%的等价写法 - 避免用
flex: 1单行声明，否则 Autoprefixer 不会补-ms-版本，IE 直接忽略
示例：
@mixin flex-item-stretch {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
-ms-flex-preferred-size: 0%;
flex: 1 1 0%;
}
响应式和降级逻辑不该塞进 mixin，交给调用方或 @supports
一个 mixin 不该决定“在小屏下是否启用 flex-wrap”，那是媒体查询的事；也不该自动加 @supports (display: flex) —— 这会让旧浏览器白屏。
- 兼容性兜底应由外层结构控制，例如先写
display: block，再用@supports包住 Flex 声明 - mixins 只负责生成“已知安全”的兼容块，不猜测运行时环境
- 若项目已弃用 IE11，但 mixin 里还硬编码
-ms-flexbox，就等于持续输出冗余、潜在冲突的 CSS
更稳妥的调用方式：
.card-list {
display: block;
@include flex-row-wrap;
@supports (display: flex) {
display: flex;
}
}
最常被忽略的一点：所有这些声明都依赖容器有明确宽度（width 或 max-width），否则 -webkit-box 在 iOS Safari 下计算换行和对齐会失准——这不是 mixin 能修的，得从布局结构上约束。
