在ie11中实现现代flexbox布局，核心策略是放弃使用未加前缀的`display: flex`，转而使用ie11专属的旧版语法`display: -ms-flexbox`。通过设置`-ms-flex-pack`和`-ms-flex-align`等属性来替代现代的`justify-content`和`align-items`，即可在不依赖polyfill的情况下让布局生效。
如何映射现代主轴与交叉轴对齐属性
IE11支持的Flexbox规范属于“旧版”或“混合”版本，其属性命名与现代标准不同。要实现主轴（水平方向）的对齐，需将`justify-content`替换为`-ms-flex-pack`；要实现交叉轴（垂直方向）的对齐，需将`align-items`替换为`-ms-flex-align`。这种映射关系是兼容的关键。
.container {
display: -ms-flexbox; /* IE10+ */
display: flex;
/* 主轴对齐：替代 justify-content */
-ms-flex-pack: center; /* IE10+ */
justify-content: center;
/* 交叉轴对齐：替代 align-items */
-ms-flex-align: center; /* IE10+ */
align-items: center;
}上述代码中，`-ms-flex-pack`接受的值包括`start`、`end`、`center`和`space-between`，这与现代标准的`justify-content`行为基本一致。需要注意的是，IE11不支持`space-around`和`space-evenly`，若需实现类似效果，通常需要通过调整子元素的边距来模拟。
立即学习“前端免费学习笔记（深入）”；
如何处理子项目的伸缩性与顺序
在现代Flexbox中，我们常用`flex-grow`、`flex-shrink`和`flex-basis`来控制子项的空间分配，而IE11使用简写属性`-ms-flex`或长属性`-ms-flex-positive`、`-ms-flex-negative`、`-ms-flex-preferred-size`。此外，现代标准的`order`属性在IE11中对应的是`-ms-flex-order`。这些属性的数值含义是相同的，可以直接映射。
.item {
/* 替代 flex: 1 1 0% */
-ms-flex: 1 1 0%; /* IE10+ */
flex: 1 1 0%;
/* 替代 order: 2 */
-ms-flex-order: 2; /* IE10+ */
order: 2;
}在实际开发中，建议始终同时编写现代属性和IE11属性，并将现代属性放在后面，以确保在支持现代标准的浏览器中优先使用新规范。对于复杂的布局，如需要换行控制，IE11使用`-ms-flex-wrap`替代`flex-wrap`，其值同样为`nowrap`、`wrap`和`wrap-reverse`。通过这套完整的属性映射，可以确保布局在IE11及现代浏览器中表现一致。
