CSS3中的彈性流體盒模型技術詳解(二)

在上一篇文章《 CSS3中的彈性流體盒模型技術詳解(一) 》裡，我給大家列出了，從css1到css3各版本中盒子模型的基本元素。本篇我會把餘下的屬性進行詳細講解。

box-pack 作用：用來規定子元素在盒子内的水準空間配置設定方式 box-pack 文法：box-pack: start | end | center | justify;  

start	對于正常方向的框，首個子元素的左邊緣吸附在盒子的左邊框顯示 對于相反方向的框，最後子元素的右邊緣吸附在盒子的右邊框顯示
end	對于正常方向的框，最後子元素的右邊緣吸附在盒子的右邊框顯示 對于相反方向的框，首個子元素的左邊緣吸附在盒子的左邊框顯示
center	均等分割剩餘空間，一半在首個子元素之前，一半在最後子元素之後
justify	首尾子元素分别吸附在左右邊框上，中間的子元素分割多餘空間

  注意：由于此屬性還處于測試當中，是以為了相容webkit核心的浏覽器，需要加上 -webkit-字首，Mozilla核心的浏覽器，需要加上字首 -moz-。   示例:        box-pack:start;  

.row{ margin:auto; border:1px solid black; width:600px; height:400px; margin-top:50px;   display:-webkit-box; display:-moz-box; display:box;   -webkit-box-orient:horizontal; -moz-box-orient:horizontal; box-orient:horizontal;   -webkit-box-align:center; -moz-box-align:center; box-align:center;   -webkit-box-pack:start;   -moz-box-pack:start; box-pack:start; }

    運作效果如下：

  當然，如果盒子的順序是從右到做，則上圖就會吸附在右側邊框顯示。        box-pack:end;

.row{ margin:auto; border:1px solid black; width:600px; height:400px; margin-top:50px;   display:-webkit-box; display:-moz-box; display:box;   -webkit-box-orient:horizontal; -moz-box-orient:horizontal; box-orient:horizontal;   -webkit-box-align:center; -moz-box-align:center; box-align:center;   -webkit-box-pack:  end ; -moz-box-pack:  end ; box-pack:  end ; }

運作效果如下：

  注：如果盒子内的顯示順序是相反方向，則它會吸附在左側邊框顯示。   box-pack:center

.row{ margin:auto; border:1px solid black; width:600px; height:400px; margin-top:50px;   display:-webkit-box; display:-moz-box; display:box;   -webkit-box-orient:horizontal; -moz-box-orient:horizontal; box-orient:horizontal;   -webkit-box-align:center; -moz-box-align:center; box-align:center;   -webkit-box-pack:  center ; -moz-box-pack:  center ; box-pack:  center ; }

    運作效果如下：

  box-pack:justify

.row{ margin:auto; border:1px solid black; width:600px; height:400px; margin-top:50px;   display:-webkit-box; display:-moz-box; display:box;   -webkit-box-orient:horizontal; -moz-box-orient:horizontal; box-orient:horizontal;   -webkit-box-align:center; -moz-box-align:center; box-align:center;   -webkit-box-pack:  justify ; -moz-box-pack:  justify ; box-pack:  justify ; }

運作效果如下:  

    box-direction 作用：box-direction規定了盒子内子元素以什麼方向來排列。 box-direction 文法：box-direction: normal | reverse | inherit;  

normal	以預設方式顯示子元素
reverse	以相反方向顯示子元素
inherit	從父容器繼承box-direction

  注意：由于此屬性還處于測試當中，是以為了相容webkit核心的浏覽器，需要加上 -webkit-字首，Mozilla核心的浏覽器，需要加上字首 -moz-。   示例：       現在我就基于上面的例子，在樣式表檔案的 .row 裡加上box-direction屬性，大家一起觀察分别觀察它們的差別    

以水準方向顯示子元素 box-orient:horizontal;

normal .row{ …   -webkit-box-orient:horizontal; -moz-box-orient:horizontal; box-orient:horizontal;   -webkit-box-pack:justify; -moz-box-pack:justify; box-pack:justify;   -webkit-box-direction:normal;   -moz-box-direction:normal; box-direction:normal; } 大家可以發現顯示順序還是以前預設的顯示順序， 水準方向，就是從左到右 reverse .row{ …   -webkit-box-orient:horizontal; -moz-box-orient:horizontal; box-orient:horizontal;   -webkit-box-pack:justify; -moz-box-pack:justify; box-pack:justify;   -webkit-box-direction:reverse;   -moz-box-direction: reverse; box-direction: reverse; } 應用上box-direction:reverse之後，顯示方向颠倒了， 以前是從左到右，現在變成從右到左了。

以垂直方向顯示子元素 box-orient: vertical;

normal .row{ …   -webkit-box-orient:vertical; -moz-box-orient:vertical; box-orient:vertical;   -webkit-box-direction:  normal ; -moz-box-direction:  normal ; box-direction:  normal ; } 大家可以發現，當以垂直方向顯示子元素時， normal屬性采用預設的從上到下顯示順序。 reverse .row{ …   -webkit-box-orient:vertical; -moz-box-orient:vertical; box-orient:vertical;   -webkit-box-direction:reverse; -moz-box-direction:reverse; box-direction:reverse; } 應用上box-direction:reverse之後，顯示方向颠倒了， 以前是從上到下，現在變成從下到上了。

  從上面的比較，大家可以看出， box-direction是根據目前子元素的顯示方向（水準或垂直）來起作用的。   box-direction:inherit 這個大家可以私下自行測試。   box-flex 作用：box-flex屬性規定了盒子内的子元素是否可以自動伸縮其尺寸，隻要盒子内對應顯示方向上有剩餘空間，可伸縮元素就會擴充來填充這些空間。 box-flex 文法：box-flex: value。  

value

元素的可伸縮值，柔性是相對，例如 box-flex:2.0 的子元素伸縮尺寸兩倍于 box-flex:1.0的子元素

注意：由于此屬性還處于測試當中，是以為了相容webkit核心的浏覽器，需要加上 -webkit-字首，Mozilla核心的浏覽器，需要加上字首 -moz-。   示例：       現在我們就來對box-flex的作用通過示例來證明一下：  

對 sidebar 應用樣式	. sidebar{ background-color:#00B366;   -webkit-box-flex:1.0;  -moz-box-flex:1.0; box-flex:1.0; }   .middle{ background-color:#80C8FE; }   .article{ background-color:#FEB380; }	從顯示效果來看， 這正好證明了， 設定了box-flex的元素是有彈性的， 且隻要盒子内對應顯示方向上有剩餘空間， 可伸縮元素就會擴充來填充這些空間。
對sidebar和middle應用樣式	.sidebar{ background-color:#00B366;     -webkit-box-flex:1.0; -moz-box-flex:1.0; box-flex:1.0; }   .middle{ background-color:#80C8FE;   -webkit-box-flex:2.0;  -moz-box-flex:2.0; box-flex:2.0; }   .article{ background-color:#FEB380; }	從顯示效果可以看出，當 .middle 樣式設定了box-flex:2.0時， 應用了 .middle 樣式的元素也變成了彈性元素，且伸縮尺寸是 box-flex:1.0的兩倍。
對sidebar,middle和article應用樣式	.sidebar{ background-color:#00B366;   -webkit-box-flex:  1.0 ;  -moz-box-flex: 1.0 ; box-flex: 1.0 ; }   .middle{ background-color:#80C8FE;   -webkit-box-flex: 2.0 ;  -moz-box-flex: 2.0 ; box-flex: 2.0 ; }   .article{ background-color:#FEB380;   -webkit-box-flex: 3.0 ;  -moz-box-flex: 3.0 ; box-flex: 3.0 ; }	這裡大家得注意一下，大家可能會認為，.article應該占1/2的空間的， 怎麼看.sidebar和.middle加起來都比.article大的啊   其實這裡配置設定的原則是， 剩餘空間按照對應比率來配置設定。   對sidebar來說，伸縮的空間 = 總剩餘空間 *(1.0/6.0)； 對middle來說，伸縮的空間 = 總剩餘空間*(2.0/6.0) ; 對article來說，伸縮的空間 = 總剩餘空間 * (3.0/6.0);

box-flex-group 作用： 一組設定了box-flex-group元素當中，值最小的，占用全部剩餘空間；值最小且相等，則平均配置設定剩餘空間。

.sidebar{ background-color:#00B366;   -webkit-box-flex: 1.0 ;  -moz-box-flex: 1.0 ; box-flex: 1.0 ;   -webkit-box-flex-group:1;  -moz-box-flex-group:1; box-flex-group:1; }   .middle{ background-color:#80C8FE;   -webkit-box-flex:2.0;  -moz-box-flex:2.0; box-flex:2.0;   -webkit-box-flex-group:2;  -moz-box-flex-group:2; box-flex-group:2; }   .article{ background-color:#FEB380;   -webkit-box-flex: 2.0 ;  -moz-box-flex: 2.0 ; box-flex: 2.0 ;   -webkit-box-flex-group:1;  -moz-box-flex-group:1; box-flex-group:1; }

大家從效果圖應該可以看出， 如果box-flex-group的值較大，則它隻配置設定實際空間， 剩餘空間配置設定給最小的一組 按比率配置設定。   這句話到底啥意思呢？ 我們從代碼中可以看到：sidebar的box-flex-group為1，article的box-flex-group也為1， 是以 sidebar和article配置設定剩餘的空間。 但是article的box-flex兩倍于sidebar的box-flex， 是以剩餘空間，article伸縮的空間 應該是 sidebar伸縮空間的兩倍。

  box-ordinal-group 作用：box-ordinal-group屬性可以使我們定義子元素的顯示順序，值小的排在前，值大的排在後。   注意：由于此屬性還處于測試當中，是以為了相容webkit核心的浏覽器，需要加上 -webkit-字首，Mozilla核心的浏覽器，需要加上字首 -moz-。   示例：   我們先看一下，沒有運用box-ordinal-group屬性時的運作效果，樣式代碼如下：

.sidebar{ background-color:#00B366;   -webkit-box-flex:2.0;  -moz-box-flex:2.0; box-flex:2.0; }   .middle{ background-color:#80C8FE;   -webkit-box-flex:2.0;  -moz-box-flex:2.0; box-flex:2.0; }   .article{ background-color:#FEB380;   -webkit-box-flex:2.0;  -moz-box-flex:2.0; box-flex:2.0; }

此時運作頁面，效果如下：

    根據上面頁面， 目前的顯示順序是 sidebar -> middle -> article   現在我們給這些子元素應用box-ordinal-group，且相應值  middle < article < sidebar，則我們期待的顯示順序應該是，   middle -> article -> sidebar   樣式代碼如下：

.sidebar{ background-color:#00B366;   -webkit-box-flex:2.0;  -moz-box-flex:2.0; box-flex:2.0;   -webkit-box-ordinal-group:4; -moz-box-ordinal-group:4; box-ordinal-group:4; }   .middle{ background-color:#80C8FE;   -webkit-box-flex:2.0;  -moz-box-flex:2.0; box-flex:2.0;   -webkit-box-ordinal-group:2; -moz-box-ordinal-group:2; box-ordinal-group:2; }   .article{ background-color:#FEB380;   -webkit-box-flex:2.0;  -moz-box-flex:2.0; box-flex:2.0;   -webkit-box-ordinal-group:3; -moz-box-ordinal-group:3; box-ordinal-group:3; }

運作頁面，效果如下：

    從效果圖來看，的确是按照我們所期待的順序顯示的（  middle -> article -> sidebar）。   至此，CSS3新增彈性盒模型屬性就講完了，本節内容還是比較多的，但是它給了我們很多驚喜，讓我們在頁面布局方面更加收放自如。   下一節，我講綜合運用CSS3 彈性盒模型 屬性 來 手把手教大家  《CSS3實戰開發: 彈性WEB界面設計（相容移動端浏覽器）》。   歡迎大家加入網際網路技術交流群：62329335  個人申明：所分享博文，絕對原創，并力争每一個知識點都通過實戰示範來進行驗證。