My flexbox cheatsheet

Flex Container Properties

display: flex: Defines a flex container.
flex-direction: row | row-reverse | column | column-reverse: Defines the direction of flex items.
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly: Aligns flex items along the main axis.
When the flex direction is set to row, the main axis is X axis.
align-items: stretch | flex-start | flex-end | center | baseline: Aligns flex items along the cross axis.
align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly: Aligns flex lines when there’s extra space in the cross-axis.
flex-wrap: nowrap | wrap | wrap-reverse: Controls if flex items can wrap onto multiple lines.

-flex-grow: <number>: Defines the flex grow factor, which determines how much a flex item will grow relative to the rest of the flex items.

flex-shrink: <number>: the opposite of flex-grow, which determines how much a flex item will shrink relative to the rest of the flex items.
flex-basis: <length> | auto: Defines the initial main size of a flex item.
align-self: auto | flex-start | flex-end | center | baseline | stretch: Allows the default alignment to be overridden for individual flex items.
flex: a shorthand property for the combination of flex-grow, flex-shrink and flex-basis