CSS Flexbox Cheatsheet

Defines a flex container and enables flex context for direct children

.container {
  display: flex;
}

Establishes the main axis direction for flex items

.container {
  flex-direction: column;
}

Items are placed left to right in ltr (default)

.container { flex-direction: row; }

Items are placed right to left in ltr

.container { flex-direction: row-reverse; }

Items are placed top to bottom

.container { flex-direction: column; }

Items are placed bottom to top

.container { flex-direction: column-reverse; }

Controls whether flex items wrap onto multiple lines

.container {
  flex-wrap: wrap;
}

All items stay on one line (default)

.container { flex-wrap: nowrap; }

Items wrap onto multiple lines from top to bottom

.container { flex-wrap: wrap; }

Items wrap onto multiple lines from bottom to top

.container { flex-wrap: wrap-reverse; }

Shorthand for flex-direction and flex-wrap combined

.container {
  flex-flow: row wrap;
}

Aligns items along the main axis

.container {
  justify-content: center;
}

Items packed toward the start of main axis (default)

.container { justify-content: flex-start; }

Items packed toward the end of main axis

.container { justify-content: flex-end; }

Items centered along the main axis

.container { justify-content: center; }

Items evenly distributed with first item at start and last at end

.container { justify-content: space-between; }

Items evenly distributed with equal space around each

.container { justify-content: space-around; }

Items distributed with equal space between all items and edges

.container { justify-content: space-evenly; }

Aligns items along the cross axis on the current line

.container {
  align-items: center;
}

Items stretch to fill the container cross axis (default)

.container { align-items: stretch; }

Items aligned to the start of the cross axis

.container { align-items: flex-start; }

Items aligned to the end of the cross axis

.container { align-items: flex-end; }

Items centered on the cross axis

.container { align-items: center; }

Items aligned by their text baselines

.container { align-items: baseline; }

Aligns flex lines when there is extra space on the cross axis

.container {
  flex-wrap: wrap;
  align-content: space-between;
}

Lines stretch to fill remaining space (default)

.container { align-content: stretch; }

Lines evenly distributed with first line at start and last at end

.container { align-content: space-between; }

Sets spacing between flex items in both directions

.container {
  display: flex;
  gap: 20px;
}

Sets spacing between rows of flex items

.container {
  row-gap: 15px;
}

Sets spacing between columns of flex items

.container {
  column-gap: 10px;
}

First value sets row gap and second sets column gap

.container {
  gap: 20px 10px;
}

Defines how much an item should grow relative to siblings

.item {
  flex-grow: 1;
}

Defines how much an item should shrink relative to siblings

.item {
  flex-shrink: 0;
}

Defines the initial main size of a flex item before growing or shrinking

.item {
  flex-basis: 200px;
}

Shorthand for flex-grow flex-shrink and flex-basis combined

.item {
  flex: 1 0 auto;
}

Equivalent to flex: 1 1 auto - item can grow and shrink

.item { flex: auto; }

Equivalent to flex: 0 0 auto - item is fully inflexible

.item { flex: none; }

Equivalent to flex: 1 1 0% - items share space equally

.item { flex: 1; }

Controls the order in which flex items appear in the container

.item {
  order: 2;
}

Negative values place items before items with default order of 0

.item-first { order: -1; }

Overrides container align-items for individual flex items

.item {
  align-self: flex-end;
}

Item uses the parent containers align-items value (default)

.item { align-self: auto; }

Individual item is centered on the cross axis

.item { align-self: center; }

Individual item stretches to fill the container

.item { align-self: stretch; }

Perfect centering of content horizontally and vertically

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Creates equal width columns that share available space

.container { display: flex; }
.item { flex: 1; }

Footer sticks to bottom when content is short

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main { flex: 1; }

Common navbar layout with logo left and nav items right

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Responsive card layout that wraps with consistent spacing

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.card { flex: 1 1 300px; }

Pushes a single item to the far end using auto margins

.nav { display: flex; }
.logout { margin-left: auto; }