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。文章來源地址http://www.zghlxwxcb.cn/news/detail-542632.html

一、常用的flex布局兼容性寫法

//定義flex
.flex{

? ? display: -webkit-flex; ?/* 新版本語法: Chrome 21+ */

? ? display: -webkit-box; ? /* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */

? ? display: -moz-box; ? ? ?/* 老版本語法: Firefox (buggy) */

? ? display: -ms-flexbox; ? /* 混合版本語法: IE 10 */ ?

? ? display: flex; ? ? ? ? ?/* 新版本語法: Opera 12.1, Firefox 22+ */

}



//主軸為水平方向，起點在左邊
.flex-row {

? -webkit-flex-direction: row;

? -moz-flex-direction: row;

? -ms-flex-direction: row;

? flex-direction: row;

}



//主軸為垂直方向，起點在上沿
.flex-column {

? -webkit-box-direction: normal;

? -webkit-box-orient: vertical;

? -moz-flex-direction: column;

? -webkit-flex-direction: column;

? flex-direction: column;

}



//伸縮寬度
.flex-1 {

? -webkit-flex: 1; ? ? ? ?/* 新版本語法: Chrome 21+ */

? flex: 1; ? ? ? ? ? ? ? ?/* 新版本語法: Opera 12.1, Firefox 22+ */

? -webkit-box-flex: 1; ? ?/* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */

? -moz-box-flex: 1; ? ? ? /* 老版本語法: Firefox (buggy) */

? -ms-flex: 1; ? ? ? ? ? ?/* 混合版本語法: IE 10 */ ?

}



// 主軸左對齊
.flex-justify-start{

? -webkit-box-pack: start;

? -webkit-justify-content: flex-start;

? -moz-justify-content: flex-start;

? -ms-justify-content: flex-start;

? justify-content: flex-start;

}



// 主軸右對齊
.flex-justify-end{

? -webkit-box-pack: end;

? -webkit-justify-content: flex-end;

? -moz-justify-content: flex-end;

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

? justify-content: flex-end;

}



// 主軸居中對齊
.flex-justify-center{

? -webkit-box-pack: center;

? -webkit-justify-content: center;

? -moz-justify-content: center;

? -ms-justify-content: center;

? justify-content: center;

}



// 主軸兩端對齊,項目之間的間隔都相等
.flex-justify-between{

? -webkit-box-pack: justify;

? -webkit-justify-content: space-between;

? -moz-justify-content: space-between;

? -ms-justify-content: space-between;

? justify-content: space-between;

}



// 每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍
.flex-justify-around{

? -webkit-box-pack: distribute;

? -webkit-justify-content: space-around;

? -moz-justify-content: space-around;

? -ms-justify-content: space-around;

? justify-content: space-around;

}



// 交叉軸的起點對齊
.flex-align-start{

? -webkit-box-align: start;

? -webkit-align-items: flex-start;

? -moz-align-items: flex-start;

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

? align-items: flex-start;

}



// 交叉軸的終點對齊
.flex-align-end{

? -webkit-box-align: end;

? -webkit-align-items: flex-end;

? -moz-align-items: flex-end;

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

? align-items: flex-end;

}



// 交叉軸的中點對齊
.flex-align-center{

? -webkit-box-align: center;

? -webkit-align-items: center;

? -moz-align-items: center;

? -ms-align-items: center;

? align-items: center;

}



// 項目的第一行文字的基線對齊
.flex-align-baseline{

? -webkit-box-align: baseline;

? -webkit-align-items: baseline;

? -moz-align-items: baseline;

? -ms-align-items: baseline;

? align-items: baseline;

}



// （默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度
.flex-align-stretch{

? -webkit-box-align: stretch;

? -webkit-align-items: stretch;

? -moz-align-items: stretch;

? -ms-align-items: stretch;

? align-items: stretch;

}



// 換行，第一行在上方
.flex-wrap {

? -webkit-box-lines: multiple;

? -webkit-flex-wrap: wrap;

? -moz-flex-wrap: wrap;

? -ms-flex-wrap: wrap;

? -o-flex-wrap: wrap;

? flex-wrap: wrap;

}

二、在IE10瀏覽器中，使用flex布局的常用兼容性代碼：

/*display*/
.display_flex{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.display_flex > *{
    display: block;
}
.display_inline-flex{
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;    
}
.display_inline-flex > *{
    display: block;
}
/*伸縮流方向*/
.flex-direction_column{
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
/*主軸對齊*/
.justify-content_flex-center{
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.justify-content_flex-end{
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
.justify-content_flex-justify{
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
/*側軸對齊*/
.align-items_flex-start{
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.align-items_flex-end{
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
.align-items_center{
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.align-items_baseline{
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
}
/*伸縮性*/
.flex_auto{
    -webkit-box-flex: 1;
    -ms-flex: auto;
    -webkit-flex: auto;
    flex: auto;
}
.flex_1{
    width: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;    
}
/*顯示順序*/
.order_2{
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}
.order_3{
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
}

到了這里，關于elementui前端flex布局兼容IE10瀏覽器常用屬性使用的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！