Flexbox CSS Cheatsheet

flexbox.md

Flexbox Cheatsheet

Flex Container

• display: flex | inline-flex

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

default to row.

• flex-wrap: nowrap | wrap | wrap-reverse

• 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

Flex Items

• order: { index: Number }
• flex: { flex-grow: Number } { flex-shrink: Number } { flex-basis } Urls to: flex-grow, flex-shrink, and flex-basis.
• align-self: auto | flex-start | flex-end | center | baseline | stretch

Use Order to rearrange flexbox children

flexbox_resources.md

• Bocoup - Dive into Flexbox
• Don't pverthink Flexbox.
• "The Ultimate Flexbox Cheatsheet"