彈性盒模型

彈性盒模型相比傳統的盒模型（display+position+float），能夠更加簡單的實現各類佈局頁面
簡單舉一個例子，代碼以下

<div class="row">
   <div>1</div>
   <div>2</div>
   <div>3</div>
</div>

css

.row{width:200px;
    height: 50px;
    /*加上廠商前綴，目前使用方式都有三種寫法：1，舊的2，過分的3，新的*/
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;}
.row div{ 
    width:50px;height:50px;
    -webkit-box-flex: 1; 
    -webkit-flex: 1; 
    -ms-flex: 1;
    flex: 1; 
    text-align: center;
    line-height: 5rem;
    background-color: #f69f75;
}

.list的屬性

flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <flex-direction> || <flex-wrap>;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

flex-flow:row nowrap || flex:column wrap

flex-flow：row-reverse nowrap

flex-flow:column nowrap

假如.row div的css改爲

.row div{ 
        width:50px;
        height:50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f69f75;
    }

也能實現數字的垂直居中