Web的Flex弹性盒模型
    
      
        
       
[ flex ]
        
       
            
        
                
         
                    
          
display: -webkit-flex;
                
         
                
         
                    
          
           width:100px;
          
                    
          
           flex: 2;
          
                    
          
           flex: 1;
          
                
         
            
        
            
        
                
         
                    
          
display: -webkit-flex; 
                
         
                
         
                    
          
                        
           width:150px; 
           margin-right:10px;
          
                    
          
           flex: 1;
          
                    
          
                        
           width:150px; 
           margin-left:10px;
          
                
         
            
        
        
       
        
       
[ flex-direction ]
        
       
            
        
                
         
                    
          
flex-direction: row; /*default*/
                    
          
display: -webkit-flex;
                
         
                
         
                    
          
           flex: 1;
          
                    
          
           flex: 2;
          
                    
          
           flex: 3;
          
                
         
            
        
            
        
                
         
                    
          
flex-direction: row-reverse;
                    
          
display: -webkit-flex; 
                
         
                
         
                    
          
           flex: 1;
          
                    
          
           flex: 2;
          
                    
          
           flex: 3;
          
                
         
            
        
            
        
                
         
                    
          
flex-direction: column;
                    
          
display: -webkit-flex; 
                
         
                
         
                    
          
           flex: 1;
          
                    
          
           flex: 2;
          
                    
          
           flex: 3;
          
                
         
            
        
            
        
                
         
                    
          
flex-direction: column-reverse;
                    
          
display: -webkit-flex; 
                
         
                
         
                    
          
           flex: 1;
          
                    
          
           flex: 2;
          
                    
          
           flex: 3;
          
                
         
            
        
        
       
        
       
[ flex-wrap ]
        
       
            
        
                
         
                    
          
-webkit-flex-wrap: nowrap; /* default */
                    
          
display: -webkit-flex; 
                    
          
width: 400px
                
         
                
         
                    
          
           100px;
          
                    
          
           width: 200px;
          
                    
          
           width: 300px;
          
                
         
            
        
            
        
                
         
                    
          
-webkit-flex-wrap: wrap
                    
          
display: -webkit-flex; 
                    
          
width: 400px
                
         
                
         
                    
          
           100px;
          
                    
          
           width: 200px;
          
                    
          
           width: 300px;
          
                
         
            
        
            
        
                
         
                    
          
-webkit-flex-wrap: wrap-reverse
                    
          
display: -webkit-flex; 
                    
          
width: 400px
                
         
                
         
                    
          
           100px;
          
                    
          
           width: 200px;
          
                    
          
           width: 300px;
          
                
         
            
        
            
       
        
       
[ flex-flow ]: flex-direction flex-wrap; /* 自个体会吧 */
        
       
[ justify-content ]
        
       
            
        
                
         
                    
          
/* 效果如同 float:left; */
                    
          
justify-content: flex-start; /* default */
                    
          
display: -webkit-flex;
                
         
                
         
                    
          
           width:100px;
          
                    
          
           width:100px;
          
                
         
            
        
            
        
                
         
                    
          
          
/* 效果如同 float:right; */
          
                    
          
justify-content: flex-end;
                    
          
display: -webkit-flex;
                
         
                
         
                    
          
           width:100px;
          
                    
          
           width:100px;
          
                
         
            
        
            
        
                
         
                    
          
/* 第三代水平居中方案 */
                    
          
justify-content: center;
                    
          
display: -webkit-flex;
                
         
                
         
                    
          
           width:100px;
          
                    
          
           width:100px;
          
                
         
            
        
            
        
                
         
                    
          
justify-content: space-between; 
                    
          
display: -webkit-flex;
                
         
                
         
                    
          
           width:100px;
          
                    
          
           width:100px;
          
                
         
            
        
            
        
                
         
                    
          
justify-content: space-around; 
                    
          
display: -webkit-flex;
                
         
                
         
                    
          
           width:100px;
          
                    
          
           width:100px;
          
                
         
            
        
        
       
        
       
[ align-self ]
        
       
            
        
                
         
                    
          
display: -webkit-flex;
                
         
                
         
                    
          
           align-self:flex-start;
          
                    
          
           align-self:flex-end;
          
                    
          
           align-self:center;
          
                    
          
                        
           align-self:auto;                        
           /*default */                    
          
                    
          
           align-self:baseline;
          
                    
          
           align-self:stretch;
          
                
         
            
        
        
       
        
       
[ align-items ]
        
       
            
        
                
         
                    
          
align-items: flex-start; /* default */
                    
          
display: -webkit-flex;
                
         
                
         
                    
          
           width:100px;
          
                    
          
           width:100px;
          
                
         
            
        
            
        
                
         
                    
          
align-items: flex-end; 
                    
          
display: -webkit-flex;
                
         
                
         
                    
          
           width:100px;
          
                    
          
           width:100px;
          
                
         
            
        
            
        
                
         
                    
          
/* 第三代垂直居中 */
                    
          
align-items: center; 
                    
          
display: -webkit-flex;
                
         
                
         
                    
          
           width:100px;
          
                    
          
           width:100px;
          
                
         
            
        
            
        
                
         
                    
          
align-items: baseline; 
                    
          
display: -webkit-flex;
                
         
                
         
                    
          
           width:100px;
          
                    
          
           width:100px;
          
                
         
            
        
            
        
                
         
                    
          
align-items: stretch; 
                    
          
display: -webkit-flex;
                
         
                
         
                    
          
           height:100px;
          
                    
          
           min-height:20px;
          
                    
          
           max-height:60px;
          
                
         
            
        
        
       
        
       
[ align-content ]
        
       
            
        
                
         
                    
          
/*  对比 align-items*/
                    
          
align-items: flex-start
                    
          
display: -webkit-flex;
                
         
                
         
                    
          
           a
          
                    
          
           b
          
                    
          
           c
          
                    
          
           d
          
                    
          
           e
          
                    
          
           f
          
                
         
            
        
            
        
                
         
                    
          
align-content: flex-start; 
                    
          
display: -webkit-flex;
                
         
                
         
                    
          
           a
          
                    
          
           b
          
                    
          
           c
          
                    
          
           d
          
                    
          
           e
          
                    
          
           f
          
                
         
            
        
            
        
                
         
                    
          
align-content: flex-end; 
                    
          
display: -webkit-flex;
                
         
                
         
                    
          
           a
          
                    
          
           b
          
                    
          
           c
          
                    
          
           d
          
                    
          
           e
          
                    
          
           f
          
                
         
            
        
            
        
                
         
                    
          
align-content: center; 
                    
          
display: -webkit-flex;
                
         
                
         
                    
          
           a
          
                    
          
           b
          
                    
          
           c
          
                    
          
           d
          
                    
          
           e
          
                    
          
           f
          
                
         
            
        
            
        
                
         
                    
          
align-content: space-between; 
                    
          
display: -webkit-flex;
                
         
                
         
                    
          
           a
          
                    
          
           b
          
                    
          
           c
          
                    
          
           d
          
                    
          
           e
          
                    
          
           f
          
                
         
            
        
            
        
                
         
                    
          
align-content: space-around; 
                    
          
display: -webkit-flex;
                
         
                
         
                    
          
           a
          
                    
          
           b
          
                    
          
           c
          
                    
          
           d
          
                    
          
           e
          
                    
          
           f
          
                
         
            
        
                    
        
                
         
                    
          
align-content: stretch; /*default*/ 
                    
          
display: -webkit-flex;
                
         
                
         
                    
          
           a
          
                    
          
           b
          
                    
          
           c
          
                    
          
           d
          
                    
          
           e
          
                    
          
           f
          
                
         
            
        
                
       
            
       
[ order ]
        
       
            
        
                
         
                    
          
display: -webkit-flex;
                
         
                
         
                    
          
           a
          
                    
          
           b
          
                    
          
           c
          
                    
          
            d (order:-1) 
          
                    
          
           e
          
                    
          
           f