1、flex兼容性

根据caniuse（），flex布局在IE6-9不支持。

因此，flex布局主要应用在移动端。

 

2、基础测试代码

            
             
                                     
     
            
      
                
                   
      
            
      
                
       
说明
            
      
        
     
    

效果：

 

说明：

将父元素设置为flex布局后，子元素也默认成了弹性元素，子元素并会自动沿主轴方向横向排列。

 

3、弹性布局轴

            
             
                                     
     
            
      
                       1            
      
            
      
                       2            
      
            
      
                       3            
      
            
      
                       4            
      
        
     
    

 

给item设置宽度后，在浮动布局中，浏览器尽可能显示article的元素，直到填充满一整行才折行显示。

在flex布局中，flex-wrap: nowrap;值优先级高于article的宽度值width。当屏幕宽度小于960px时，保证所有的article等分扩展填充；当屏幕宽度大于960px时，右侧留空白。

效果：