標籤：style http color io strong 檔案 2014 art
在上一篇文章《
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;/*相容webkit或mozilla核心瀏覽器，啟用彈性盒子模型*/display:-moz-box;display:box; -webkit-box-orient:horizontal;/*水平方向顯示，相容webkit和mozilla核心瀏覽器*/-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;/*相容webkit或mozilla核心瀏覽器，啟用彈性盒子模型*/display:-moz-box;display:box; -webkit-box-orient:horizontal;/*水平方向顯示，相容webkit和mozilla核心瀏覽器*/-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;/*相容webkit或mozilla核心瀏覽器，啟用彈性盒子模型*/display:-moz-box;display:box; -webkit-box-orient:horizontal;/*水平方向顯示，相容webkit和mozilla核心瀏覽器*/-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;/*相容webkit或mozilla核心瀏覽器，啟用彈性盒子模型*/display:-moz-box;display:box; -webkit-box-orient:horizontal;/*水平方向顯示，相容webkit和mozilla核心瀏覽器*/-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;/*水平方向顯示，相容webkit和mozilla核心瀏覽器*/-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;/*水平方向顯示，相容webkit和mozilla核心瀏覽器*/-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;/*垂直方向顯示，相容webkit和mozilla核心瀏覽器*/-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;/*垂直方向顯示，相容webkit和mozilla核心瀏覽器*/-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{/*給側邊欄添加樣式*/ /*將應用了此樣式的元素都設定為可伸縮元素*/-webkit-box-flex:1.0; -moz-box-flex:1.0;box-flex:1.0;} .middle{/*給中間地區添加樣式*/ } .article{/*給主體內容添加樣式*/ } |
|
從顯示效果來看， 這正好證明了， 設定了box-flex的元素是有彈性的，且只要盒子內對應顯示方向上有剩餘空間， 可伸縮元素就會擴充來填充這些空間。 |
| 對sidebar和middle應用樣式 |
.sidebar{/*給側邊欄添加樣式*/ /*將應用了此樣式的元素都設定為可伸縮元素*/-webkit-box-flex:1.0;-moz-box-flex:1.0;box-flex:1.0;} .middle{/*給中間地區添加樣式*/ /*將應用了此樣式的元素都設定為可伸縮元素*/-webkit-box-flex:2.0; -moz-box-flex:2.0;box-flex:2.0;} .article{/*給主體內容添加樣式*/ } |
|
從顯示效果可以看出，當 .middle 樣式設定了box-flex:2.0時，應用了 .middle 樣式的元素也變成了彈性元素，且伸縮尺寸是box-flex:1.0的兩倍。 |
| 對sidebar,middle和article應用樣式 |
.sidebar{/*給側邊欄添加樣式*/ -webkit-box-flex: 1.0; -moz-box-flex:1.0;box-flex:1.0;} .middle{/*給中間地區添加樣式*/ -webkit-box-flex:2.0; -moz-box-flex:2.0;box-flex:2.0;} .article{/*給主體內容添加樣式*/ -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{/*給側邊欄添加樣式*/ -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{/*給中間地區添加樣式*/ -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{/*給主體內容添加樣式*/ -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{/*給側邊欄添加樣式*/ -webkit-box-flex:2.0; -moz-box-flex:2.0;box-flex:2.0;} .middle{/*給中間地區添加樣式*/ -webkit-box-flex:2.0; -moz-box-flex:2.0;box-flex:2.0;} .article{/*給主體內容添加樣式*/ -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{/*給側邊欄添加樣式*/ -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{/*給中間地區添加樣式*/ -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{/*給主體內容添加樣式*/ -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
個人申明：所分享博文，絕對原創，并力爭每一個知識點都通過實戰示範來進行驗證。
