CSS 3 cheatsheet

CSS 3: Flexbox

7 common CSS 3 tasks.

Center something

Center a child horizontally and vertically.

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

Place children side by side with a gap between them.

.row {
  display: flex;
  gap: 1rem;
}

Put the first item at the start and the last at the end.

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

Let items flow to the next line when there is no room.

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

Let an item take all remaining space.

.search {
  flex: 1;
}

Switch the main axis to vertical.

.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

Make the page at least as tall as the screen, with the main area filling the space.

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}