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