flexbox是一個新的盒子模型，當你給一個元素使用了flexbox模塊，那么它的子元素就會指定的方向在水平或者縱向方向排列。這些子元素會按照一定的比例進行擴展或收縮來填補容器的可用空間。flexbox有許多很好用的地方，下面就著重講述一下它的一些使用場景：
 
Example 1： flexbox等分布局
 
      如果你要實現以下所示的樣式，你可能首先想到的是用float：
 

CSS Code復制內容到剪貼板

     <ul id="ranktop3">    
    
   <li>    
    
     <div class="ranktab">1</div>   
    
     <p>fdeg</p>    
    
     <p>霸氣值：170</p>    
    
   </li>     
    
   <li>    
    
     <div class="ranktab">2</div>    
    
     <p>bling</p>    
    
     <p>霸氣值：160</p>    
    
   </li>    
    
   <li>    
    
     <div class="ranktab">3</div>    
    
     <p>lea</p>   
    
     <p>霸氣值：150</p>   
    
   </li>    
    
</ul>   
  
ul li {   
    
    width: 32.9%;   
    
    float: left;   
    
    border-right: 1px solid #fa9900;   
    
    padding: 5px 0;   
    
}  

 
但當只有2個排名后，少了一個li節點后，就會展示如下：

刪除兩個li節點后如下：