A Complete Guide to Flexbox | CSS-Tricks

A Complete Guide to Flexbox | CSS-Tricks

Properties for the Parent (flex container)

display: flex

flex-direction: row | row-reverse | column | column-reverse

flex-wrap: nowrap | wrap | wrap-reverse

flex-flow: <'flex-direction'> || <'flex-wrap'>

justify-content: flex-start | flex-end | center | space-between | space-around

align-items: flex-start | flex-end | center | baseline | stretch

align-content flex-start | flex-end | center | space-between | space-around | stretch Properties for the Children (flex items)

order:

flex-grow: ; /* default 0 */

flex-shrink: ; /* default 1 */

flex-basis: | auto; /* default auto */

flex: none | [<'flex-grow'> <'flex-shrink'> ? || <'flex-basis'>] /* default 0 1 auto */

align-self: auto | flex-start| flex-end | center | baseline | stretch;