flex IE 10 对照表
IE10 不支持 gap， 不支持 flex-wrap: wrap-reverse（反转）
| 属性 | 标准 | IE10 |
|---|---|---|
| display | display:flex | display:-ms-flexbox |
| 属性 | 标准 | IE10 |
|---|---|---|
| flex-direction | flex-direction: row; | -ms-flex-direction: row; |
| flex-direction: column; | -ms-flex-direction: column; |
1
2
3
| 属性 | 标准 | IE10 |
|---|---|---|
| flex-wrap | flex-wrap: wrap; | ❌ 不支持 |
-ms-flex-wrap: wrap; 是否能用存疑
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| 属性 | 标准 | IE10 |
|---|---|---|
| justify-content | justify-content: flex-start; | -ms-flex-pack: start; |
| justify-content: flex-end; | -ms-flex-pack: end; | |
| justify-content: center; | -ms-flex-pack: center; | |
| justify-content: space-between; | -ms-flex-pack: justify; | |
| justify-content: space-around; | 不支持 |
1
2
3
| 属性 | 标准 | IE10 |
|---|---|---|
| align-items | align-items: stretch; | -ms-flex-align: stretch; |
| align-items: flex-start; | -ms-flex-align: start; | |
| align-items: flex-end; | -ms-flex-align: end; | |
| align-items: center; | -ms-flex-align: center; |
如果 item 元素有 height 或 width 属性， 则 align-items: stretch 将无效
1
2
3
| 属性 | 标准 | IE10 |
|---|---|---|
| align-content | 不支持 |
item 属性
| 标准属性 | IE10 旧语法 | 说明 |
|---|---|---|
| flex: 1 0 auto; | -ms-flex: 1 0 auto; | 简写形式 |
| flex-grow: 1; | -ms-flex-positive: 1; | 放大因子 |
| flex-shrink: 0; | -ms-flex-negative: 0; | 缩小因子 |
| flex-basis: auto; | -ms-flex-preferred-size: auto; | 基础宽度 |
| align-self: auto; | -ms-flex-item-align: auto; | 单个项目的交叉轴对齐 |
| align-self: center; | -ms-flex-item-align: center; | 单独居中 |
| align-self: start; | -ms-flex-item-align: start; | 顶对齐 |
| align-self: end; | -ms-flex-item-align: end; | 底对齐 |
| order: 1; | -ms-flex-order: 1; | 控制项目顺序 |
css
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;