CSS弹性盒模型flex在布局中的应用_html/css_WEB-ITnose

× 目录 [1]元素居中 [2]两端对齐 [3]底端对齐 [4]输入框按钮 [5]等分布局 [6]自适应布局 [7]悬挂布局 [8]全屏布局

前面的话

　　前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法，本文将介绍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