CSS3弹性盒模型

关键词：弹性盒模型

• 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;}