box布局

盒模型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 属性规定当框大于子元素的尺寸，在何处放置子元素

-webkit-box-pack: start || center || end;

start
对于正常方向的框，首个子元素的左边缘被放在左侧（最后的子元素后是所有剩余的空间）
对于相反方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）
end
对于正常方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）。
对于相反方向的框，首个子元素的左边缘被放在左侧（最后子元素后是所有剩余的空间）。
center
均等地分割多余空间，其中一半空间被置于首个子元素前，另一半被置于最后一个子元素后
justify
在每个子元素之间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）。

4.-webkit-box-align
box-align 属性规定如何对齐框的子元素。

box-align: start|end|center|baseline|stretch;

start
对于正常方向的框，每个子元素的上边缘沿着框的顶边放置。
对于反方向的框，每个子元素的下边缘沿着框的底边放置。
end
对于正常方向的框，每个子元素的下边缘沿着框的底边放置。
对于反方向的框，每个子元素的上边缘沿着框的顶边放置。
center
均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下。
baseline
如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐。
stretch
拉伸子元素以填充包含块

5.-webkit-box-lines
设置或检索伸缩盒对象的子元素是否可以换行显示

-webkit-box-lines: single | multiple;

single 不允许子元素换行
multiple 允许子元素换行

6.-webkit-box-flex
box-flex 属性规定框的子元素是否可伸缩其尺寸。
提示：可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间。
value
元素的可伸缩行。柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。