一、弹性布局

弹性布局，又称“Flex布局”

1、弹性布局的使用

• 给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式
• 容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流；
• display:flex; 容器添加弹性布局后，显示为块级元素；

display:inline-flex; 容器添加弹性布局后，显示为行级元素；

• 设为 Flex布局后，子元素的float、clear和vertical-align属性将失效。但是position属性，依然生效。

代码如下：

    
        
        
                
    
        
     
      1
     
        
     
      2
     
        
     
      3
     
        
     
      4
     
        
     
      5
     
    
    

效果图：