CSS Justify & Align Cheatsheet

Flexbox horizontal alignment

justify-content aligns items along the main axis (horizontal if flex-direction is row).

justify-content: flex-start

justify-content: flex-end

justify-content: center

justify-content: space-between

justify-content: space-around

justify-content: space-evenly

justify-items and justify-self properties are not used in a flex layout.

Flexbox vertical alignment

When there are multiple lines in the flex container, align-content aligns the lines on the cross axis (vertical if flex-direction is row).

align-content: flex-start

align-content: flex-end

align-content: center

align-content: space-between

align-content: space-around

align-content: space-evenly

align-content: stretch (rows stretch to fill available space)

align-items aligns items along the cross axis, inside their respective cell.

align-items: stretch (default)

align-items: flex-start

align-items: flex-end

align-items: center

align-items: baseline

Grid: horizontal alignment

justify-content aligns the entire grid horizontally when there is extra space. For example:

.container {
  width: 100px; /* Container is 100px */
  display: grid;
  grid-template-columns: repeat(3, 20px); /* Grid is 60px */
}

justify-content: start

justify-content: end

justify-content: center

justify-content: space-between

justify-content: space-around

justify-content: space-evenly

justify-content: stretch

justify-items controls horizontal alignment of grid items inside their grid cells.

justify-items: start

justify-items: end

justify-items: center

justify-items: stretch (default)

Grid: vertical alignment

align-content aligns the grid vertically when there is extra space. For example,

.container {
  height: 100px; /* Container is 100px */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
 
.item {
  height: 20px; /* Two rows are 40px heigh */
}

align-content: start

align-content: end

align-content: center

align-content: space-between

align-content: space-around

align-content: space-evenly

align-content: stretch (rows stretch to fill available space, item itself may not if you have set a height)

align-items controls the vertical alignment of grid items inside their grid cell.

align-items: start

align-items: end

align-items: center

align-items: stretch

align-items: baseline