Flexbox Cheat Sheet

Container

• display: flex or display: inline-flex: creates a flex context (or an inline flex context) for direct children of this element

• flex-direction determines the main and cross axis for the container, valid values are:

  • row (default): horizontal, in the direction of writing (left to right for English)

  • row-reverse: horizontal, in the opposite direction of writing (right to left for English)

  • column: vertical, top to bottom

  • column-reverse: vertical, bottom to top

• flex-wrap determines if flex items will try to fit in one line, valid values are:

  • nowrap (default): all flex items will be on one line

  • wrap: flex items will wrap onto multiple lines, top to bottom

  • wrap-reverse: flex items will wrap onto multiple lines, bottom to top

• flex-flow: shorthand combining flex-direction and flex-wrap

  • Formal syntax: flex-flow: <'flex-direction'> || <'flex-wrap'>

• justify-content defines the alignment along the main axis, valid values are:

  • flex-start (default): pack flex items from the start

  • flex-end: pack flex items from the end

  • start: pack items from the start

  • end: pack items from the end

  • left: pack items from the left

  • right: pack items from the right

  • center: pack items around the center

  • space-around: distribute items evenly with equal space around them

  • space-between: distribute items evenly with equal space between them

  • space-evenly: distribute items evenly, ensuring equal space between any two items

  • stretch: distribute items evenly, stretching auto-sized items to fit the container

• align-items defines the alignment along the cross axis, valid values are:

  • flex-start (default): pack flex items from the start

  • flex-end: pack flex items from the end

  • start: pack items from the start

  • end: pack items from the end

  • center: pack items around the center

  • baseline: align items based on their baselines

  • stretch: stretch items to fill the container

• align-content defines the alignment of extra space along the cross axis, valid values are:

  • flex-start (default): pack flex items from the start

  • flex-end: pack flex items from the end

  • start: pack items from the start

  • end: pack items from the end

  • center: pack items around the center

  • space-around: distribute items evenly with equal space around them

  • space-between: distribute items evenly with equal space between them

  • space-evenly: distribute items evenly, ensuring equal space between any two items

  • stretch: distribute items evenly, stretching auto-sized items to fit the container

Items

• flex-grow determines how much the item can grow if necessary

  • Accepts a single positive number (unitless), default value is 0

  • Specifies how much of the remaining space in the flex container should be assigned to the item

  • The remaining space is the size of the flex container minus the size of all flex items' sizes together

  • If all items have the same flex-grow, all items will receive an equal share of the remaining space

  • If not all items have the same flex-grow, the remaining space is distributed according to the ratio defined by these values

• flex-shrink determines how much the items can shrink if necessary

  • Accepts a single positive number (unitless), default value is 1

  • If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink

• flex-basis determines the initial size of a flex item before the remaining space is distributed

  • Can use any valid width value, intrinsic size values, auto (default) or content

  • auto means "look at my width or height property", whereas content is used for automatic sizing

• flex: shorthand combining flex-grow, flex-shrink and flex-basis

  • Formal syntax: flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

• align-self allows the item to override the default align-items specified by the container

  • Valid values are the same as those of the align-items property in the container

• order determines the ordering of the item

  • Accepts an integer value

  • Items in a container are sorted by ascending order value and then by their source code order

  • Might cause accessibility issues if used incorrectly