弹性盒模型

弹性盒模型相比传统的盒模型（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;
    }

也能实现数字的垂直居中