Back to Home

Flexbox Cheat Sheet

A comprehensive reference guide to all CSS Flexbox properties and values.

Flexbox Properties Reference

Container Properties

These properties are applied to the flex container (the parent element).

display

Defines a flex container; inline or block depending on the given value.

Default: block

.container {
  display: flex | inline-flex;
}
  • flex: Creates a block-level flex container
  • inline-flex: Creates an inline-level flex container

flex-direction

Establishes the main axes, defining the direction flex items are placed in the flex container.

Default: row

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
  • row: Left to right (default)
  • row-reverse: Right to left
  • column: Top to bottom
  • column-reverse: Bottom to top

flex-wrap

Controls whether items are forced into a single line or can be wrapped onto multiple lines.

Default: nowrap

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap: All items on one line (default)
  • wrap: Items wrap to additional lines if needed
  • wrap-reverse: Items wrap to additional lines in reverse

flex-flow

Shorthand for flex-direction and flex-wrap properties.

Default: row nowrap

.container {
  flex-flow: flex-direction flex-wrap;
}

/* Example */
.container {
  flex-flow: row wrap;
}

justify-content

Defines alignment along the main axes, distributing extra space.

Default: flex-start

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
  • flex-start: Items packed at start of container
  • flex-end: Items packed at end of container
  • center: Items centered in container
  • space-between: Items evenly distributed; first at start, last at end
  • space-around: Items evenly distributed with equal space around them
  • space-evenly: Items evenly distributed with equal space between them

align-items

Defines how flex items are laid out along the cross axes.

Default: stretch

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}
  • stretch: Items stretch to fill container (default)
  • flex-start: Items placed at start of cross axes
  • flex-end: Items placed at end of cross axes
  • center: Items centered on cross axes
  • baseline: Items aligned by their text baselines

align-content

Aligns a flex container's lines within when there is extra space in the cross-axes.

Default: stretch

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

Note: This property only has effect when there are multiple lines of flex items.

  • stretch: Lines stretch to fill container
  • flex-start: Lines packed at start of container
  • flex-end: Lines packed at end of container
  • center: Lines centered in container
  • space-between: Lines evenly distributed; first at start, last at end
  • space-around: Lines evenly distributed with equal space around them

gap, row-gap, column-gap

Controls spacing between flex items.

Default: 0

.container {
  gap: 10px; /* row-gap and column-gap */
  row-gap: 10px;
  column-gap: 20px;
}
  • gap: Shorthand for row-gap and column-gap
  • row-gap: Spacing between rows
  • column-gap: Spacing between columns

This cheat sheet is designed to be a quick reference for CSS Flexbox properties. For more detailed information, visit the Flexbox Theory page.