CSS Flexbox Properties Cheat Sheet

• [MDN] CSS Flexible Box Layout
• [caniuse] CSS Flexible Box Layout Module
• [W3C] CSS Flexible Box Layout Module Level 1
• [CSSWG] CSS Flexible Box Layout Module Level 1 (Draft)
• [CSSWG] CSS Box Alignment Module Level 3 (Draft)
  • [CSSWG] Overview of Alignment Properties

Flex Container

• display
  • flex
  • inline-flex
• flex-flow — Shorthand for <flex-direction>? <flex-wrap>?.
• flex-direction
  • row = initial
  • row-reverse
  • column
  • column-reverse
• flex-wrap
  • nowrap = initial
  • wrap
  • wrap-reverse
• place-content — Shorthand for <align-content> <justify-content>?.
• align-content — Defines how the browser distributes space between and around content items along the cross-axis of their container (has no effect on single line flexible boxes).
  • stretch = initial
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
• justify-content — Defines how the browser distributes space between and around content items along the main-axis of their container.
  • flex-start = initial
  • flex-end
  • center
  • space-between
  • space-around
• align-items — Defines the align-self property value on all direct children as a group.
  • stretch = initial
  • flex-start
  • flex-end
  • center
  • baseline

Flex Items

• flex — Shorthand for <flex-grow>? <flex-shrink>? <flex-basis>?.
  • initial — Equivalent to 0 1 auto.
  • auto — Equivalent to 1 1 auto.
  • none — Equivalent to 0 0 auto.
  • <number> — Equivalent to <number> 1 0.
  • <number> <number> — Equivalent to <number> <number> auto.
  • <number> <width> — Equivalent to <number> 1 <width>.
• flex-grow
  • 0 = initial
  • <number>
• flex-shrink
  • 1 = initial
  • <number>
• flex-basis
  • auto = initial
  • content
  • <width>
• order
  • 0 = initial
  • <integer>
• align-self — Aligns flex items of the current flex line overriding the align-items value.
  • auto = initial
  • flex-start
  • flex-end
  • center
  • baseline
  • stretch

Notes

• Global values like inherit, unset, revert were omitted.
• gap, column-gap, and row-gap are currently not supported in Safari and hence omitted.
• Both justify-items and justify-self are ignored in flexbox layouts.