display: 
    > flex 

flex-direction: determines which direction is the main axis
    > row 
    > row-reversed 
    > column 
    > column-reversed 

flex-wrap: wraps content in flexcontainer if necessary
    > nowrap (default)
    > wrap

flex-flow: specifies both flex-direction and flex-wrap
    > ex = flex-flow: row wrap

justify-content: determines how elements are positioned along main axis (again, main axis is set by flex direction)
    > flex-start 
    > flex-end 
    > center
    > etc.

align-items: determines how elements are positioned along the non main axis, the cross axis (again, main axis is set by flex direction)
    > flex-start 
    > flex-end 
    > center
    > etc.
    > Note, align-items has a different meaning if display from above is NOT set to flex and is set to grid, ie (display: grid)
    
    When items are wraped, you use flex-content to change how rows are positioned to each other

align-content: 
    > center
    > space-between
    > space-around
    > etc.