關(guān)鍵詞：彈性盒模型
- display:box
父容器屬性：
box-orient | box-direction | box-align | box-pack | box-lines
1. box-orient
box-orient(orient譯為排列更準(zhǔn)確)用來(lái)確定父容器里子容器的排列方式奋献，是水平還是垂直历恐。可選屬性如下所示：
horizontal | vertical | inline-axis | block-axis | inherit
2. box-direction
box-direction用來(lái)確定父容器里的子容器排列順序乖酬，具體屬性如下代碼所示：
normal | reverse | inherit
3. box-align
box-align表示父容器里面子容器的垂直對(duì)齊方式，可選參數(shù)如下所示：
start | end | center | baseline | stretch
4. box-pack
box-pack表示父容器里面子容器的水平對(duì)齊方式融求，可選參數(shù)如下所示：
start | end | center | justify
子容器屬性：
1. box-flex
box-flex表示子容器的寬度咬像，可以是固定值也可是流動(dòng)響應(yīng)式的，這對(duì)移動(dòng)端開(kāi)發(fā)大有裨益生宛。
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，但這里是默認(rèn)是豎直的*/
-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;}
