Flexbox Cheatsheet
Daisho Komiyama edited this page Jun 14, 2018
·
1 revision
Here's a cheatsheet for Flexbox properties.
- display: flex | inline-flex
- flex-direction: row | row-reverse | column | column-reverse
- flex-wrap: wrap | nowrap | wrap-reverse
- flex-flow (shorthand for flex-direction and flex-wrap. e.g. flex-flow: row wrap;)
- justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly (new)
- align-items: flex-start | flex-end | center | baseline | stretch
- align-content (cross axis - adjust to largest item): flex-start | flex-end | center | stretch | space-between | space-around
- order: <integer>
- flex-grow: <number>
- flex-shrink: <number>
- flex-basis: <length> | auto
- flex (shorthand for grow, shrink and basis. default: 0 1 auto)
- align-self (overrides alignment set on parent)