在上一篇文章《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; | ||||||||
|
| 以垂直方向顯示子元素 box-orient: vertical; | ||||||||
|
從上面的比較，大家可以看出，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
個人申明：所分享博文，絕對原創，併力爭每一個知識點都通過實戰演示來進行驗證。