盒模型display:box是css3中的新屬性
display: -webkit-box;
1.-webkit-box-direction
定義子元素的顯示方向是正序顯示還是倒序
-webkit-box-direction: normal || reverse;
2.-webkit-box-orient
水平,垂直排列元素的所有子元素
horizontal 在水平行中從左向右排列子元素躁锡。
vertical 從上向下垂直排列子元素乱顾。
/* Firefox */
-moz-box-orient:horizontal;
/* Safari预厌、Opera 以及 Chrome */
-webkit-box-orient:horizontal;
/* W3C */
box-orient:horizontal;
3.-webkit-box-pack
box-pack 屬性規(guī)定當(dāng)框大于子元素的尺寸玛痊，在何處放置子元素
-webkit-box-pack: start || center || end;
start
對于正常方向的框究西，首個子元素的左邊緣被放在左側(cè)（最后的子元素后是所有剩余的空間）
對于相反方向的框，最后子元素的右邊緣被放在右側(cè)（首個子元素前是所有剩余的空間）
end
對于正常方向的框峡蟋，最后子元素的右邊緣被放在右側(cè)（首個子元素前是所有剩余的空間）项钮。
對于相反方向的框，首個子元素的左邊緣被放在左側(cè)（最后子元素后是所有剩余的空間）丈秩。
center
均等地分割多余空間盯捌，其中一半空間被置于首個子元素前，另一半被置于最后一個子元素后
justify
在每個子元素之間分割多余的空間（首個子元素前和最后一個子元素后沒有多余的空間）癣籽。
4.-webkit-box-align
box-align 屬性規(guī)定如何對齊框的子元素挽唉。
box-align: start|end|center|baseline|stretch;
start
對于正常方向的框滤祖，每個子元素的上邊緣沿著框的頂邊放置筷狼。
對于反方向的框，每個子元素的下邊緣沿著框的底邊放置匠童。
end
對于正常方向的框埂材，每個子元素的下邊緣沿著框的底邊放置。
對于反方向的框汤求，每個子元素的上邊緣沿著框的頂邊放置俏险。
center
均等地分割多余的空間，一半位于子元素之上扬绪，另一半位于子元素之下竖独。
baseline
如果 box-orient 是inline-axis或horizontal，所有子元素均與其基線對齊挤牛。
stretch
拉伸子元素以填充包含塊
5.-webkit-box-lines
設(shè)置或檢索伸縮盒對象的子元素是否可以換行顯示
-webkit-box-lines: single | multiple;
single 不允許子元素?fù)Q行
multiple 允許子元素?fù)Q行
6.-webkit-box-flex
box-flex 屬性規(guī)定框的子元素是否可伸縮其尺寸莹痢。
提示：可伸縮元素能夠隨著框的縮小或擴(kuò)大而縮寫或放大。只要框中有多余的空間，可伸縮元素就會擴(kuò)展來填充這些空間竞膳。
value
元素的可伸縮行航瞭。柔性是相對的，例如 box-flex 為 2 的子元素兩倍于 box-flex 為 1 的子元素坦辟。
