IE10兼容flex布局的屬性使用

IE10以下完全不兼容flex，IE10部分兼容，使用時對應chrome的用法為如下所示：

chrome　　　　　　　　　　　　　　　   IE10

display: flex; 　　　　　　　　　　　　 　display: -ms-flexbox;

flex-direction: column;　　　　　　　　　 -ms-flex-direction: column;

justify-content: center; 　　　　　　　　　-ms-flex-pack: center;

justify-content:space-between;　　　　　  -ms-flex-pack: justify;

justify-content:space-around;　　　　　　 -ms-flex-pack: justify; // 無法實現，用justfiy代替

justify-content: flex-end;　　　　　　　　  -ms-flex-pack: end;

align-items: flex-start;　　　　　　　　　  -ms-flex-align: start;

align-items: center;　　　　　  　　　　　-ms-flex-align: center;

align-items: flex-end;　　　　　　　　　　-ms-flex-align: end;

align-items: baseline;　　　　　　　　　   -ms-flex-align: baseline;

flex: 1;　　　　　　　　　　　　　　　　-ms-flex: 1;

align-self: center;　　　　　 　　　　　　-ms-align-self: center;

flex-wrap: wrap; 　　　　　　　　　　　  -ms-flex-wrap: wrap;

 

注：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 inherit。