css3 flex弹性盒自动铺满写法详解编程语言

    <style type="text/css"> 
    .flexcontainer{ 
        width:100%; 
        height: 100%; 
        position: absolute; 
        left:0px; 
        top:0px; 
        display: flex; 
        flex-direction: column; 
    } 
    .flex1 { 
        width: 100%; 
        height: 8rem; 
        float: left; 
        background: #f00; 
     
    } 
    .flex2 { 
        width: 100%; 
        height: 4rem; 
        flex:1; 
        float: left; 
        background: #000; 
    } 
   .flex3 { 
        width: 100%; 
        height: 7rem; 
        float: left; 
        background: #ccc; 
    }     
</style> 
<div class="flexcontainer"> 
    <div class="flex1"></div> 
    <div class="flex2"></div> 
    <div class="flex3"></div> 
</div>