flexbox cheat sheet

Flexbox cheat sheet. Explore our ultimate quick reference for flexbox.

This simple Flexbox Cheat Sheet offers a visual and textual guide to mastering Flexbox layout in CSS. It covers key properties for both Flexbox containers and items, including display settings to initiate a flex context, flex-direction for item orientation, and alignment controls such as justify-content and align-items for precise positioning. The cheat sheet also explores individual item properties like order, flex-grow, and align-self, providing clear examples and illustrations to demonstrate how these properties affect layout and design.

Flexbox Container


Turns an element into a flex container, defining its children as flex items.

  • display: flex display: flex: Creates a block-level flex container.
  • display: inline-flex display: inline-flex: Creates an inline-level flex container.

Flex Direction

Controls the orientation of flex items within the container.

  • flex-direction: row flex-direction: row: Items are laid out in a horizontal direction.
  • flex-direction: row-reverse flex-direction: row-reverse: Items are laid out horizontally in reverse order.
  • flex-direction: column flex-direction: column: Items are laid out vertically.
  • flex-direction: column-reverse flex-direction: column-reverse: Items are laid out vertically in reverse order.

Flex Wrap

Determines whether flex items are forced onto one line or can wrap onto multiple lines.

  • flex-wrap: nowrap flex-wrap: nowrap: All items are fitted on one line.
  • flex-wrap: wrap flex-wrap: wrap: Items will wrap onto multiple lines from top to bottom.
  • flex-wrap: wrap-reverse flex-wrap: wrap-reverse: Items will wrap onto multiple lines from bottom to top.

Justify Content

Aligns flex items along the main axis, offering fine control over their positioning.

  • justify-content: flex-start justify-content: flex-start: Items align at the start of the container.
  • justify-content: flex-end justify-content: flex-end: Items align at the end of the container.
  • justify-content: center justify-content: center: Items center along the main axis.
  • justify-content: space-between justify-content: space-between: Items are evenly spaced; first item is at the start, last item at the end.
  • justify-content: space-around justify-content: space-around: Items are evenly spaced with equal space around them.
  • justify-content: space-evenly justify-content: space-evenly: Items are evenly distributed with equal space between them.

Align Items

Aligns flex items along the cross axis, useful for aligning items vertically within a container.

  • align-items: flex-start align-items: flex-start: Items align at the start of the container's cross axis.
  • align-items: flex-end align-items: flex-end: Items align at the end of the cross axis.
  • align-items: center align-items: center: Items center along the cross axis.
  • align-items: baseline align-items: baseline: Items are aligned based on their baseline.
  • align-items: stretch align-items: stretch: Items stretch to fill the container (default behavior).

Align Content

Adjusts the alignment of flex lines in multi-line flex containers, similar to justify-content but for the cross axis.

  • align-content: flex-start align-content: flex-start: Lines packed to the start of the container.
  • align-content: flex-end align-content: flex-end: Lines packed to the end of the container.
  • align-content: center align-content: center: Lines centered in the container.
  • align-content: space-between align-content: space-between: Lines evenly distributed; first line is at the start, last line at the end.
  • align-content: space-around align-content: space-around: Lines evenly distributed with equal space around each line.
  • align-content: stretch align-content: stretch: Lines stretch to take up the remaining space.

Flexbox Children


Properties applied to flex items, offering individual control over their flex behavior and alignment.


Changes the order of flex items without affecting the source code.

  • order: 1 order: 1: Moves an item to a different position.

Flex Grow

Defines the ability of a flex item to grow if necessary.

  • flex-grow: 1 flex-grow: 1: Allows an item to grow to fill available space.

Flex Basis

Sets the initial main size of a flex item.

  • flex-basis: 50% flex-basis: 50%: Specifies the starting size before additional space is distributed.

Flex Shrink

Defines the ability of a flex item to shrink if necessary.

  • flex-shrink: 1 flex-shrink: 1: Allows an item to shrink if there isn't enough space.

Align Self

Allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

  • align-self align-self: flex-start|flex-end|center|baseline|stretch: Overrides the container's align-items value for the specific item.