详解css3 flex弹性盒自动铺满写法

零五零八

本文主要介绍了详解css3 flex弹性盒自动铺满写法，分享给大家，具体如下：

1. <style type="text/css">
   
2.     .flexcontainer{
   
3.         width:100%;
   
4.         height: 100%;
   
5.         position: absolute;
   
6.         left:0px;
   
7.         top:0px;
   
8.         display: flex;
   
9.         flex-direction: column;
   
10.     }
    
11.     .flex1 {
    
12.         width: 100%;
    
13.         height: 8rem;
    
14.         float: left;
    
15.         background: #f00;
    
16.      
    
17.     }
    
18.     .flex2 {
    
19.         width: 100%;
    
20.         height: 4rem;
    
21.         flex:1;
    
22.         float: left;
    
23.         background: #000;
    
24.     }
    
25.    .flex3 {
    
26.         width: 100%;
    
27.         height: 7rem;
    
28.         float: left;
    
29.         background: #ccc;
    
30.     }   
    
31. </style>
    
32. <div class="flexcontainer">
    
33.     <div class="flex1"></div>
    
34.     <div class="flex2"></div>
    
35.     <div class="flex3"></div>
    
36. </div>
    

复制代码