CSS3 Flex布局（伸缩布局）

https://www.cnblogs.com/chris-oil/p/5736257.html
https://blog.csdn.net/lyznice/article/details/53981062
https://blog.csdn.net/dx18520548758/article/details/54316024

1.png

2.png

demo01的代码：

    
        
        
        
    
    
        

            
1
            
2
            
3
        
    

效果图：

3.png

demo02伸缩布局固定宽度

代码如下：

    
        
        
        
    
    
        

            
1
            
2
            
3
        
    



    
        
        
    
    
    

效果图：

QQ截图20180705144916.png

demo03伸缩布局排列方式

注意：是给父盒子添加flex-direction:column

flex-direction:column

4.png

QQ截图20180705145647.png

代码如下：

    
        
        
        
    
    
        

            
1
            
2
            
3
        
    



    
        
        
    
    
    

效果图：

5.png

justify-content属性：调整主轴对齐（水平对齐）

子盒子如何在父盒子里面水平对齐

注意：这些属性是给父亲添加的

6.png

我的代码

    
        
        
        
    
    
        

            
1
            
2
            
3
        
    

align-items属性:调整侧轴（垂直对齐）

子盒子如何在父盒子里面垂直对齐

注意：这些属性是给父亲添加的

针对于一行的情况使用

7.png

我的代码

    
        
        
        
    
    
        

            
1
            
2
            
3
        
    

align-content属性：侧轴

8.png

flex-wrap属性:控制是否换行

9.png

10.png

order属性:

11.png

请注意：使用flex布局的容器，子元素的float、clear和vertical-align属性将不起作用。