CSS舊版flex及兼容 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

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

適用范圍

　　舊版本flex是指最早的flex版本，該版本的flex應用在safari3.1-6(主要表現在windows系統下的safari瀏覽器)、ios3.2-6.1、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;
}