CSS的flex在布局中的用法

元素居中

万源网站建设公司创新互联建站,万源网站设计制作，有大型网站制作公司丰富经验。已为万源1000+提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱，请找那个售后服务好的万源做网站的公司定做！

【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在布局中的用法
转载来源：http://bjjierui.cn/article/peiped.html