A quick cheatsheet for flexbox.
For a more detailed cheatsheet see something like: https://yoksel.github.io/flex-cheatsheet/.
.parent {
display: [flex|inline-flex];
/* Change direction */
flex-direction: [row|row-reverse|column|column-reverse];
/* Wrapping */
flex-wrap: [nowrap|wrap|wrap-reverse];
/* Shorthand for `flex-direction` and `flex-wrap` */
flex-flow: [flex-direction] [flex-wrap];
/* Justify content */
justify-content: [flex-start|flex-end|center|space-between|space-around];
/* Align elements in the cross axis (ie, usually vertical alignment) */
align-items: [flex-start|flex-end|center|baseline|stretch];
/* Align content - only for multi line flex containers */
align-content: [flex-start|flex-end|center|space-between|space-around|stretch];
}
.child {
/* Change ordering */
order: [integer];
/* Align self on the cross axis (ie, usually vertical alignment) */
align-self: [flex-start|flex-end|center|baseline|stretch];
/* Grow container to fill space */
flex-grow: [positive-integer];
/* Shrink container */
flex-shrink: [positive-integer];
/* Set size of container */
flex-basis: [content|width-height-style-value];
}