display:flex(弹性盒模型)

display:flex(弹性盒模型)，经常用在响应式开发中。
行式布局 flex-flow: row;
html

<div class="div-flex-box">  
    <div class="flex-1" ></div>  
    <div class="flex-2"></div>  
    <div class="flex-3"></div>  
</div>  

css：

.div-flex-box {  
    display: flex;  
    flex-flow: row; /*行式布局*/  
}  
.flex-1{  
    flex:1;  /*占1份，共4份*/  
    height: 60px;  
    background-color: aquamarine;  
}  
.flex-2{  
    flex:2; /*占2份，共4份*/  
    height: 60px;  
    background-color: chocolate;  
}  
.flex-3{  
    flex:1; /*占1份，共4份*/  
    height: 60px;  
   background-color: darkcyan;  
}