Utilisation du flex

Parent properties :

Display

    
        
        .container {
            display: none | inline | block | inline-block ;
        }
        
    

Flex direction

    
        
        .container {
            flex-direction: row | row-reverse | column | column-reverse ;
        }
        
    

Flex wrap

    
        
        .container {
            flex-wrap: no-wrap | wrap | wrap-reverse ;
        }
        
    

Justify content

    
        
        .container {
            Justify-content: flex-start | flex-end | center | space-between | sapce-around | space-evenly ;
        }
        
    

Align items

    
        
        .container {
            Align-items: flex-start | flex-end | center | stretch | baseline ;
        }
        
    

Align content

    
        
        .container {
            align-content: flex-start | flex-end | center | stretch | space-between | space-around ;
        }
        
    

Children properties :

Flex-grow

    
        
        .container {
            flex-grow: 4; /* default 0 */
        }
        
    

Flex-shrink

    
        
        .container {
            flex-shrink: 3; /* default 1 */
        }
        
    

Flex-basis

    
        
        .container {
             flex-basis:  | auto; /* default auto */
        }
        
    

Align self

    
        
        .container {
            align-self:  flex-start | flex-end | center | stretch | baseline ;
        }