What is CSS Flexbox and when should you use it?

Short answer

Flexbox is a one-dimensional CSS layout module designed to distribute space and align items within a container, either along a row or a column.

How it works

A flex container is defined with display: flex. Its children become flex items that can grow, shrink, and align according to the container's main axis (default: horizontal) and cross axis (default: vertical). Key properties include justify-content (main axis alignment), align-items (cross axis alignment), and flex-wrap for multi-line behavior.

Example

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: stretch;
}
.item {
  flex: 1 1 200px; /* grow, shrink, basis */
}

Why it matters

Flexbox excels at component-level layouts: navbars, card footers, form alignments, and centering. It eliminates the need for float-based hacks and makes responsive alignment intuitive. For two-dimensional layouts, pair it with or upgrade to CSS Grid.