CSS弹性盒模型flex在布局中的运用办法

传统盒子模型：个别的布局我们都是用的盒子模型，通过浮动定位来布局行元素、行内块元素不换行，块元素独有一行，应用浮动可以使块元素横排。但是某些特别的布局，它们很难实现。比方垂直居中，所以我们就要用到弹性盒模型。

CSS弹性盒模型flex在布局中的利用

元素居中

【1】伸缩容器上运用主轴对齐justify-content和侧轴对齐align-items

    DEMO      

【2】在伸缩项目上运用margin:auto

    DEMO      

两端对齐

    DEMO
    DEMO
    DEMO    
    DEMO     
 

底端对齐

    DEMO
    DEMO
    DEMO
    DEMO      

输入框按钮

  
  按钮

等散布局

    1
    2
    3
    4                

多列自顺应布局

    
        
left
        
left
                
    
        
center
        
center
                
    
        
right
        
right
                        

吊挂布局

    左侧吊挂
    主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容    

全屏布局

    
        
top
     
    
        
            
left
             
        
            
                
right
                        
                            
                  
    
        
bottom
            

以上就是CSS弹性盒模型flex在布局中的利用的全部内容。

相干参照 ： 百分百源码网

以上就是CSS弹性盒模型flex在布局中的运用办法的细致内容，更多请关注 百分百源码网 其它相干文章！