Flexbox

Setting display: flex on a container turns its direct children into a flexible row by default — arguably the single most useful CSS layout tool for everyday interface work like navigation bars and card rows.

Example 1: a navigation bar, evenly spaced

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

justify-content controls spacing along the main row direction — space-between pushes the first and last items to the opposite edges with even gaps between everything in the middle. align-items: center vertically centers everything in the row, which alone eliminates a huge amount of the manual pixel-nudging CSS layout used to require before flexbox existed.

Example 2: flex-direction changes the axis entirely

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

flex-direction: column stacks children vertically instead of horizontally — justify-content and align-items still work the same way, just along the new axis. gap adds even spacing between items without needing individual margins on each one, which is simpler to maintain since there's exactly one value to change instead of margins on every child.