Web04--Flex布局

1、flex布局

1.1 flex认识

1.2 flex组成

1.3 flex布局

1.3.1 主轴对齐方式

1.3.2 侧轴对齐方式

1.3.3 修改主轴方向

1.3.4 align-self

    
    
    
    


     

        
1
        
2
        
3
     

1.3.5 弹性伸缩比

1.3.6 弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有盒子都在一行显示。

属性名：flex-wrap

属性值：

        wrap：换行

        nowrap：不换行（默认）

    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
        
6
     

1.3.7 行对齐方式

    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
        
6