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

CSS Code復(fù)制內(nèi)容到剪貼板

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

 
但當(dāng)只有2個(gè)排名后，少了一個(gè)li節(jié)點(diǎn)后，就會(huì)展示如下：

刪除兩個(gè)li節(jié)點(diǎn)后如下：