Flex Container styles

display: flex

flex-direction to control main axis vs cross axis direction, can reverse too

flex-wrap to control whether to wrap items to new line, can reverse too

justify-content: flex-start and flex-end position the content along the main axis

space-between and space-around or center

align-items: center, stretch, flex-start, flex-end on cross axis

align-content: control space on wrapped elements

Flex Item styles

order: sets the order of the items, default value is 0

align-self: set align on an individual element

flex-grow: proportion to divide up extra space

flex-shrink: proportion of an element to give up if there’s not enough space

flex-basis sets the width

flex: is shorthand for above three styles