Common Flex Patterns

Navbar with space-between

Logo on the left, links on the right, one rule.

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

Equal-height cards

Flex items stretch to match the tallest sibling by default — no extra CSS needed.

.cards {
  display: flex;
  gap: 16px;
  align-items: stretch;  /* default */
}
.card {
  flex: 1;
  padding: 16px;
}

The centering one-liner

display: flex; justify-content: center; align-items: center; centers anything, of any size, perfectly.