CSS Flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Container

Enables a flex context for its direct children.

.container {
    display: flex;
}

flex-direction

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

flex-wrap

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

justify-content

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
/* 
flex-start          [[--][-][--]            ]
flex-end            [            [--][-][--]]
center              [      [--][-][--]      ]
space-between       [[--]      [-]      [--]]
space-around        [  [--]    [-]    [--]  ]
space-eventy        [   [--]   [-]   [--]   ]
*/

align-items

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end;
}
/*
stretch             # # # # 
                    # # # #
                    # # # #

flex-start          # # # # 
                    # #   #
                    #

flex-end            #
                    # #   #
                    # # # #
*/

align-content

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

See also: CSS