Flexbox Cheatsheet

flexbox-cheatsheet.less

.flex-container {
   
    /* Flex context for direct children */
    display: flex;
    
    /* Main axis direction */
    flex-direction: row /* | row-reverse | column | column-reverse */;
    
    /* Main axis multiline (default flexbox restricts to single line) */
    flex-wrap: nowrap /* | wrap | wrap-reverse */;

    /* Main axis space distribution */
    justify-content: flex-start /* | flex-end | center | space-between | space-around | space-evenly */;
    
    /* Cross axis space distribution */
    align-items: flex-start /* | flex-end | center | baseline | stretch */;
    
    /* Cross axis lined items distribution (multiple lines) */
    align-content: flex-start /* | flex-end | center | space-between | space-around | stretch */;

    .flex-item {

        /* Layout order */
        order: 0 /* integer */; 
        
        /* Proportional space item uses to fill */
        flex-grow: 0 /* integer */;
        
        /* Proportional space item uses to shrink */
        flex-shrink: 0 /* integer */;
        
        /* Default item size prior to empty space distribution */
        flex-basis: content /* any unit value | auto */;
        
        /* Override of container's align-items */
        align-self: auto /* | flex-start | flex-end | center | baseline | stretch */;
    }

}