Taking Flex to the Next Level

for flex-direction, you can also use row-reverse and column-reverse to order the child elements backwards.
for flex-wrap, default is nowrap so the content spills out of the parent (while squeezing children as much as possible at avoid spilling). can set flex-wrap: wrap so it wraps around.
flex-flow is shorthand for combining direction and wrap, e.g.
- flex-flow: row-reverse wrap

justify-content is for the main axis. flex-start (default), flex-end, center, space-around, space-evenly, space-between
align-items is for second axis. stretch (default), flex-start, flex-end, baseline, center

align-items applies to each row (or column), while align-content applies to all the rows together (or columns) in the case that there are multiple rows (or columns) because of wrapping

flex-grow - the rate at which the item will grow once there is extra space
- default value is 0 – doesn't get bigger when there's extra space
flex-shrink – the rate at which the item will shrink when there is less than enough space
- default value is 1 – all elements shrink at a rate equal to each other
- if the value is 0, the item will never shrink (it will just overflow if the flex container gets too small to contain the content)
when there isn't enough space, items with different flex-shrink values will shrink at different rates. when there's extra space, items with different flex-grow values will grow at different rates.
what defines "enough space"? if you set a width on an item, that's the amount that it needs. if you don't set a width, it's just based on the content inside the item. this is encapsulated in the flex basis property.

default value is flex-basis: auto. auto looks to the element's set width (or height, if flex-direction is column), and if there's none set, it will be based on the element's content.
the difference between flex-basis and width is that flex-basis applies to the main axis – if the main axis is row, then it refers to width, but if it's column, then flex-basis applies to height!
flex-basis overrides width (or height), but min-width (or min-height) will override the flex properties