CSS舊版flex及兼容

前面的話

　　flex彈性盒模型有3個版本: 舊版本、混合版本和新版本。若是要保證flex彈性盒模型在各個主流瀏覽器上表現一致，就必須掌握這3個版本的不一樣用法。深刻理解CSS彈性盒模型flex已經詳細介紹過其基本用法，本文主要介紹舊版本flex的不一樣之處及兼容寫法

 

適用範圍

　　舊版本flex是指最先的flex版本，該版本的flex應用在safari3.1-6(主要表如今windows系統下的safari瀏覽器)、ios3.2-6.一、android2.1-4.3。且都須要添加-webkit-前綴

 

伸縮項目

　　 舊版本flex要求伸縮項目必須是block元素

<span>
    <span>項目一</span>
    <span>項目二</span>
    <span>項目三</span>
    <span>項目四</span>
</span>

伸縮流方向

　　舊版本flex的伸縮流方向中的reverse值，只改變伸縮項目的排列順序，並不改變其對齊方式。因此建議使用direction:rtl來實現伸縮流反向效果

伸縮流換行

　　舊版本flex不支持伸縮流換行，因此在其餘版本flex中儘可能不要使用換行操做

 

主軸對齊

　　舊版本flex的主軸對齊屬性中沒有擴散對齊屬性space-around，因此在其餘版本flex中儘可能不要使用該屬性值

 

伸縮性

　　舊版本flex的伸縮性只有一個值，表示基於伸縮項目自己尺寸大小的擴展或收縮比率，舊版本的-webkit-box-flex:1;至關於新版本的flex:auto;因此要想實現不基於伸縮項目自己尺寸大小的伸縮須要顯式地將伸縮項目的寬度width設置爲0

　　[注意]該值支持小數，但不能爲負數

顯示順序

　　舊版本flex的顯示順序是以1爲默認值的正整數，而新版本flex的顯示順序是以0爲默認值的天然數。因此在設置顯示順序時，跳過1，從2開始設置

 

flex兼容

　　如下是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;
}