IT兄弟連 HTML5教程 CSS3屬性特效 彈性盒模型

 

CSS3引入了新的盒模型——彈性盒模型，該模型決定一個盒子在其餘盒子中的分佈方式以及如何處理可用的空間。使用該模型，能夠很輕鬆的建立自適應瀏覽器窗口的流動佈局或自適應字體大小的彈性佈局。彈性盒模型看起來很不錯，Gecko和WebKit對該模型都有一些嘗試性的測試。在這些屬性以前加上-moz和-webkit便可使用該屬性。也便是說，firefox、safari、chrome可使用這些特性。該模型對咱們解決網頁設計中一些常見的問題很是方便，如：表單佈局、垂直居中、視覺上分離html流，等等。爲了方便，筆者在這裏都使用webkit的前綴來說解彈性盒模型的例子，讀者能夠經過chrome瀏覽器預覽案例。彈性盒模型的例子使用如下的HTML代碼：

傳統的盒模型基於HTML流在垂直方向上排列盒子。使用彈性盒模型能夠規定特定的順序，也能夠反轉之。要開啓彈性盒模型，只需設置擁有子盒子的盒子的display的屬性值爲box（或inline-box）便可。這裏的盒子是box，爲box開啓盒模型：

#box{  display:box;  }                        /*   爲box盒子開啓盒模型   */

彈性盒子基礎佈局的CSS代碼以下：

使用chrome瀏覽器直接打開這個文件，就能夠看到瀏覽器對這個網頁文件解釋後的結果，如圖1所示。

圖1  彈性盒模型

 

（1）box-orient定義盒模型的佈局方向

box-orient的參數說明如表1所示。

表1 box-orient參數說明

 

「box-orient」定義分佈的座標軸：vertical和horizontal。默認是horizontal水平，當將box中的該屬性設爲水平方向vertical時，box的子盒子垂直顯示，爲box設置CSS部分代碼以下：

 

使用chrome瀏覽器從新打開這個文件，就能夠看到這個盒模型的子盒子垂直分佈，如圖2所示。

圖2  彈性盒模型垂直分佈

 

（2）box-direction元素排列順序

「box-direction」能夠設置盒子出現的順序。默認狀況下，只需定義分佈座標軸——box隨html流分佈。若是爲水平座標軸，則從左到右分佈；垂直座標軸則從上到下分佈。box-direction的參數說明如表2所示。

表2  box-direction參數說明

    

定義「box-direction」的屬性值爲「reverse」，則反轉盒子的排列順序。若不設置該屬性值或爲爲該屬性設值爲「normal」，則盒子以正序排列。接下來，咱們將盒子設爲水平分佈並將其出現的順序反轉，box的CSS代碼以下：

 

將上例的box的CSS代碼替換後，使用chrome瀏覽器從新打開這個文件，就能夠看到這個盒模型的順序反轉了，如圖3所示：

圖3 彈性盒模型反轉

 

（3）box-ordinal-group設置元素的具體位置

屬性「box-ordinal-group」定義盒子分佈的順序。能夠隨意的控制其分佈順序。這些組以一個從「1」開始的數字定義，盒模型將首先分佈這些組，全部這些盒子將在每一個組中。分佈將從小到大排列。將盒子的分佈順序按照特定的順序排列如「3-2-1-5-4」，CSS代碼以下：

 

將上例的CSS代碼替換，使用chrome瀏覽器從新打開這個文件，就能夠看到這個盒模型的順序按照「3-2-1-5-4」排列，如圖4所示：

圖4  彈性盒模型排序

 

（4）box-flex定義盒子的彈性空間

默認狀況下，盒子並不具備彈性，若是box-flex的屬性值至少爲1時，則變得富有彈性。若是盒子是彈性的，其大小將按下面的方式計算：

子元素的尺寸=盒子的尺寸*子元素的box-flex屬性值 / 全部子元素的box-flex屬性值的和

下面的例子中，爲每一個盒子設定彈性空間。看起來好像是用百分比定義盒子的大小，可是有一個區別：使用彈性盒模型，增長一個盒子，無須從新計算其大小，CSS代碼以下：

將上例的CSS代碼替換，使用chrome瀏覽器從新打開這個文件，就能夠看到每一個盒模子的彈性空間不一樣，如圖5所示：

圖5  盒模型彈性空間

 

除了爲每一個盒子設定彈性空間，咱們還能夠爲部分盒子設定彈性空間，其它部分盒子有固定大小，例如咱們將最中間的盒子也就是第三個盒子設定一個固定寬度爲200px，其它盒子設定box-flex的屬性值至少爲1時，隨着box盒子的寬度變化，除了第三個子盒子的寬度固定，其它盒子的寬度都會變化，CSS代碼以下：

 

將上例的CSS代碼替換，使用chrome瀏覽器從新打開這個文件，就能夠看到瀏覽器對這個網頁文件解釋後的結果，如圖6所示：

圖6  盒模型彈性空間

 

咱們試圖改變box的寬度來查看子盒子的大小，由於這裏設定的box寬度爲100%，因此咱們能夠經過改變瀏覽器的大小來控制box的寬度，當咱們縮小瀏覽器時，能夠觀察到第三個盒子的寬度固定，其它盒子的寬度變小，如圖7所示：

圖7 盒模型彈性空間

 

一樣地，咱們也能夠將兩邊的盒子固定，中間的盒子固定大小，這裏就須要讀者本身去實踐練習。

 

（5）box-pack對盒模型富裕空間進行管理

box-pack屬性規定當框大於子元素的尺寸，在何處放置子元素。該屬性規定水平框中的水平位置，以及垂直框中的垂直位置。box-pack的參數說明如表3所示。

表3 box-pack參數說明

 

 

下面經過一個案例來對盒模型的富裕空間進行管理，經過一塊兒使用box-align和box-pack屬性，當有富裕空間時，讓全部子元素居中，CSS代碼以下：

 

將上例的CSS代碼替換，使用chrome瀏覽器從新打開這個文件，就能夠看到盒子的子元素居中，如圖8所示：

圖8  盒模型富裕空間管理

 

特別地，咱們來對「box-align」屬性的「baseline」屬性值來進行說明，「baseline」表示設置伸縮盒對象的子元素基線對齊，可能大多數讀者不理解什麼叫作基線對齊，咱們經過下面的案例來對這個屬性值進行圖形化的理解，代碼以下：

 

本例中的盒模型包含5個子元素，併爲該盒子的「box-align」屬性設置爲基線對齊「baseline」。爲第2個子元素的行高設爲200px，第4個子元素的行高設爲100px，其他子元素爲自己的高度130px。運行這個文件，獲得的效果如圖9所示：

圖9  盒模型子元素基線對齊

 

經過本例的展現，咱們不難理解基線對齊的意義，它根據盒模型子元素的主體內容進行對齊。

 

（6）box-align在垂直方向上對元素的位置進行管理

box-align屬性規定如何對齊框的子元素，box-align的參數說明如表4所示。

表4  box-align參數說明

    

下面經過一個案例來對盒模型的垂直方向的富裕空間進行管理。當有垂直方向有富裕空間時，讓全部子元素居中，html代碼以下：

 

使用chrome瀏覽器從新打開這個文件，就能夠看到盒模型的子元素居中顯示，如圖10所示：

圖10 盒模型垂直富裕空間管理

 

做爲前端開發者來講，該模型對咱們解決網頁設計中一些常見的問題很是方便，如：表單佈局、垂直居中、視覺上分離html流，等等。