宜宾网站建设公司

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://hbruida.cn/article/peiped.html

其他资讯