CSS3Auto Scaling布局（中）——flexbox布局

標籤：eve   瀏覽器   flow   firefox   工作   布局   檔案   row   使用   

 混合過渡版

上一篇我們主要講了舊版box布局，今天這篇主要講flexbox布局。

混合版本的Flexbox模型是2011年提出的工作草案，主要是針對IE10瀏覽器實現的伸縮布局效果，其功能和舊版本的功能大同小異。

在這裡我們還是採用上一篇的檔案，使用混合過渡代碼實現IE10的伸縮布局。

首先，我們要設定伸縮盒display屬性，它有兩個值

因為是針對IE10瀏覽器的，Chrome,Firefox,Opera不支援，所以我們用IE瀏覽器來做測試

div{    display: -ms-flexbox;}

下面我們來測試下過渡版本的屬性吧

 

1.flex-direction

//flex-direction和我們上一篇部落格中的box-orient屬性一樣，設定伸縮項目的相片順序

四個值我們都試試吧

-ms-flex-direction: row;

-ms-flex-direction: row-reverse;

-ms-flex-direction: column;

-ms-flex-direction: column-reverse;

 

 2.flex-wrap

//類似於舊版本的base-line,但是我上一篇沒有講base-line，因為沒有瀏覽器支援它

當我們縮小瀏覽器時，預設效果如下，不換行

-ms-flex-wrap: nowwrap;

-ms-flex-wrap: wrap;//換行

-ms-flex-wrap: wrap-reverse;//換行，換到上一行

 

3.flex-flow

//前面兩個屬性的簡寫方式

-ms-flex-flow: row wrap;

 

4.flex-pack

//flex-pack和舊版本的box-pack一樣，設定項目的分布方式

就只試一個吧

-ms-flex-pack: end;

 

5.flex-align

//同舊版的box-align，設定處理伸縮項目的額外空間

我們就只試下center,其他讀者可自行嘗試

-ms-flex-align: center;

 

6.flex

//同舊版本的box-flex，設定分配伸縮項目的比例

p:nth-child(1){    -ms-flex:1;}p:nth-child(2){    -ms-flex:3;}p:nth-child(3){    -ms-flex:1;}

 

7.flex-order

//同舊版本的box-ordinal-group,用來控制伸縮項目的出現順序

p:nth-child(1){    -ms-flex:1;    -ms-flex-order:3;}p:nth-child(2){    -ms-flex:3;    -ms-flex-order:2;}p:nth-child(3){    -ms-flex:1;    -ms-flex-order:1;}

 

小結

這一篇關於過渡版的就到此結束了，下一篇新版flex布局才是重頭戲，記得持續關注哦！

 

CSS3Auto Scaling布局（中）——flexbox布局