關(guān)鍵詞：彈性盒模型

• display:box

父容器屬性：
box-orient | box-direction | box-align | box-pack | box-lines

1. box-orient
box-orient(orient譯為排列更準(zhǔn)確)用來(lái)確定父容器里子容器的排列方式，是水平還是垂直?？蛇x屬性如下所示：
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)端開發(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;}