最近的的项目基本都是移动端的活动页面，所以css3的很多属性都可以肆无忌惮的用了，布局常见的就是利用box来布局了。下面就来介绍利用旧版box的基本使用，高级使用自行揣摩。
####-webkit-box
属性： box-orient; box-align; box-pack; box-flex; box-ordinal-group; box-lines;
以下demo是基于webkit内核制作
####1、box-orient
作用：设置盒对象的子元素的排列方式。
取值：
horizontal | vertical | inline-axis | block-axis | inherit
以水平排列为例 code如下：
html：
<div class="section">
<div class="box box-first">1</div>
<div class="box box-second">2</div>
<div class="box box-third">3</div>
</div>
css：
.section{width: 700px;display:-webkit-box;-webkit-box-orient:horizontal;}
.section .box{width: 100px;height: 100px;color: #fff;text-align: center;line-height: 100px;}
说明：将父容器display设置为box后，然后使用box-orient，这样子元素就会依据你所设置box-orient的值做出想对应的排列。
ps：其中“horizontal与inline-axis”以及“vertical与block-axis”表现形式相同。
查看demo请搓这里 进入
####2、box-align
作用：设置盒对象的子元素的对齐方式。
取值：
start | end | center | baseline(基线对齐) | stretch(自适应父元素)
以水平居中对齐为例 code如下：
html：
<div class="section">
<div class="box box-first">1</div>
<div class="box box-second">2</div>
<div class="box box-third">3</div>
</div>
css：
.section{width: 700px;display:-webkit-box;box-orient：horizontal;box-align:center;}
.section .box{width: 100px;height: 100px;color: #fff;text-align: center;line-height: 100px;}
说明：
box-align的对齐方式受box-orient影响；
当父容器设置box-orient：vertical时，子元素以水平为方向进行对齐。其中box-align：start与box-align：end分别靠左靠右。
查看demo请搓这里 进入
当父容器设置box-orient：horizontal时，子元素以垂直为方向进行对齐。其中box-align：start与box-align：end分别靠上靠下。
查看demo请搓这里 进入
####3、box-pack
作用：设置盒对象的子元素的对齐方式。
取值：
start | end | center | justify
以水平居中对齐为例 code如下：
html：
<div class="section">
<div class="box box-first">1</div>
<div class="box box-second">2</div>
<div class="box box-third">3</div>
</div>
css：
.section{width: 700px;display:-webkit-box;box-pack:center;}
.section .box{width: 100px;height: 100px;color: #fff;text-align: center;line-height: 100px;}
说明：
box-pack与box-align相反
box-pack的对齐方式也受box-orient影响；
当父容器设置box-orient：vertical时，子元素以垂直为方向进行对齐。其中box-pack：start与box-pack：end分别靠上靠下
查看demo请搓这里 进入
当父容器设置box-orient：horizontal时，子元素以水平为方向进行对齐。其中box-pack：start与box-pack：end分别靠左靠右。
查看demo请搓这里 进入
####4、box-flex
作用：设置盒对象的子元素分配其剩余空间。
取值：
number(数字)
例1 code如下：
html：
<div class="section">
<div class="box box-first">1</div>
<div class="box box-second">2</div>
<div class="box box-third">3</div>
</div>
css：
.section{width: 700px;display:-webkit-box;box-pack:center;}
.section .box{color: #fff;text-align: center;line-height: 100px;}
.section .box-first{box-flex:1}
.section .box-second{box-flex:1}
.section .box-third{box-flex:2}
说明：
1、在未设置子元素内容的时候，可以这么来理解。子元素按照设定的比例进行分配，例如父容器的width=700px，子元素分别设置box-flex:1,1,2，所以box-first与box-second所占宽度是700*(1/4) = 175px,box-third所占宽度是700*(2/4) = 350px;
2、当子元素设置内容之后，子元素的宽度就不能这么来算了，因为box-flex只是分配父容器的剩余空间而已，所以box-first,box-second,box-third所分到的应该是除内容外所剩余下来的宽度。如例2所示。
例2 code如下：
css：
.section{width: 700px;display:-webkit-box;box-pack:center;}
.section .box{padding:10px;color: #fff;text-align: center;line-height: 100px;}
.section .box-first{box-flex:1}
.section .box-second{box-flex:1}
.section .box-third{box-flex:2}
父容器的width=700px，父容器剩余的空间为：700-10*2*3 = 640px，当子元素分别设置box-flex:1,1,2，所以box-first与box-second所占宽度是640*(1/4)+10*2 = 180px,box-third所占宽度是640*(2/4)+10*2 = 340px;
查看demo请搓这里 进入
####5、box-ordinal-group
作用：设置盒对象的子元素的显示顺序。
取值：
integer
例 code如下：
html：
<div class="section">
<div class="box box-first">1</div>
<div class="box box-second">2</div>
<div class="box box-third">3</div>
</div>
css：
.section{width: 700px;display:-webkit-box;}
.section .box{width: 100px;height: 100px;color: #fff;text-align: center;line-height: 100px;}
.section .box-first{-webkit-box-ordinal-group:3}
.section .box-second{-webkit-box-ordinal-group:1}
.section .box-third{-webkit-box-ordinal-group:2}
说明：
数值较低的元素显示在数值较高的元素前面。
如果设置相同数值的元素，它们的显示顺序取决于它们的代码顺序。
有了这个我们可以很方便的改变显示的顺序，不用去在html中去改变位置了。
查看demo请搓这里 进入
####6、box-lines
作用：设置盒对象的子元素是否可以换行显示。
取值：
single(一行显示) | multiple(换行显示)
以single为例 code如下：
html：
<div class="section">
<div class="box box-first">1</div>
<div class="box box-second">2</div>
<div class="box box-third">3</div>
</div>
css：
.section{width: 700px;display:-webkit-box;-webkit-box-lines:single}
.section .box{width: 100px;height: 100px;color: #fff;text-align: center;line-height: 100px;}
说明：
如果设置为box-lines:multiple时候，当子元素超出父容器时会进行换行显示。不过浏览器现在支持该属性但是还没实现该效果。
查看demo请搓这里 进入