弹性盒模型相比传统的盒模型（display+position+float），可以更加简单的实现各种布局页面

    
   
     
      1
     
   
     
      2
     
   
     
      3
     
    

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

也能实现数字的垂直居中