在上一篇文章《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
個人申明:所分享博文,絕對原創,併力爭每一個知識點都通過實戰演示來進行驗證。