关键词：弹性盒模型
- display:box
父容器属性：
box-orient | box-direction | box-align | box-pack | box-lines
1. box-orient
box-orient(orient译为排列更准确)用来确定父容器里子容器的排列方式，是水平还是垂直。可选属性如下所示：
horizontal | vertical | inline-axis | block-axis | inherit
2. box-direction
box-direction用来确定父容器里的子容器排列顺序，具体属性如下代码所示：
normal | reverse | inherit
3. box-align
box-align表示父容器里面子容器的垂直对齐方式，可选参数如下所示：
start | end | center | baseline | stretch
4. box-pack
box-pack表示父容器里面子容器的水平对齐方式，可选参数如下所示：
start | end | center | justify
子容器属性：
1. box-flex
box-flex表示子容器的宽度，可以是固定值也可是流动响应式的，这对移动端开发大有裨益。
2. box-ordinal-group
box-ordinal-group决定子容器的排列顺序。
具体看代码：
<!-- html代码 -->
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
.box{
height:300px;
border:1px #aaa solid;
background-color: #eee;
padding:10px;
font-size:20;
display:-webkit-box;
color:#eee;
/* 水平排列方向 */
-webkit-box-direction:reverse;
-webkit-box-direction:normal;
/* 水平还是竖直排列 */
-webkit-box-orient: vertical;
-webkit-box-orient:horizontal;
-webkit-box-pack:end;
-webkit-box-pack:center;
-webkit-box-pack:justify;
/* 类比text-align，但这里是默认是竖直的*/
-webkit-box-align:start;
-webkit-box-align:end;
-webkit-box-align:center;
}
.box div{
height:100px;
background:#C6C;
border:1px #9CC solid;
text-align:center;
line-height: 100px;
}
/* box-ordinal-group：决定排序 */
.box div:nth-of-type(1){-webkit-box-ordinal-group:2;}
.box div:nth-of-type(2){-webkit-box-ordinal-group:1;}
.box div:nth-of-type(3){-webkit-box-ordinal-group:3;}
.box div:nth-of-type(4){-webkit-box-ordinal-group:5;}
.box div:nth-of-type(5){-webkit-box-ordinal-group:4;}
/* box-flex：决定宽度 */
.box div:nth-of-type(1){width:200px;}
.box div:nth-of-type(2){-webkit-box-flex:3;}
.box div:nth-of-type(3){-webkit-box-flex:2;}
.box div:nth-of-type(4){-webkit-box-flex:1;}
.box div:nth-of-type(5){-webkit-box-flex:4;}
