CSS Flexbox

Explanation

Flexbox solves the classic CSS layout problems that were painful with floats and positioning: vertically centering an element, distributing items evenly, making a navigation bar where one item fills remaining space. It operates in one dimension at a time: either a row (main axis = horizontal) or a column (main axis = vertical). The key mental model: a flex container controls how its direct children (flex items) are laid out. Set display: flex on the container; all direct children become flex items. Container properties control overall layout: flex-direction (row, column, row-reverse, column-reverse), flex-wrap (wrap or nowrap), justify-content (alignment along the main axis: flex-start, flex-end, center, space-between, space-around, space-evenly), align-items (alignment along the cross axis: flex-start, flex-end, center, stretch, baseline), and gap (spacing between items). Item properties control individual items: flex-grow (proportion of available space to consume), flex-shrink (how much to shrink when space is tight), flex-basis (initial size before growing/shrinking), and align-self (override the container's align-items for one item). The shorthand flex: 1 means flex-grow: 1; flex-shrink: 1; flex-basis: 0% — the "fill available space equally" pattern. Flexbox is best for: navigation bars, card rows, centering content, form layouts, and any single-direction arrangement. For two-dimensional layouts (grids with both rows and columns), CSS Grid is the right tool.

Code Example

/* Common Flexbox patterns */

/* Horizontal nav bar with space between logo and links */
.navbar {
  display: flex;
  align-items: center;        /* vertically centered */
  justify-content: space-between; /* logo left, links right */
  padding: 0 1.5rem;
  height: 60px;
}

/* Center anything, vertically and horizontally */
.centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card row that wraps on small screens */
.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card {
  flex: 1 1 280px; /* grow, shrink, min-width 280px */
}

/* Sidebar layout: fixed sidebar + flexible main */
.layout {
  display: flex;
  gap: 2rem;
}
.sidebar { width: 250px; flex-shrink: 0; }
.main    { flex: 1; }   /* takes all remaining space */

/* Push last item to the end */
.toolbar {
  display: flex;
  align-items: center;
}
.toolbar .spacer { flex: 1; } /* pushes subsequent items right */

Why It Matters for Engineers

Flexbox is used in virtually every modern web layout. Understanding the container-vs-item model and the axis system lets you build any layout correctly the first time, rather than adding random CSS properties until something looks right (the vibe coding approach to CSS). Misunderstanding Flexbox is one of the most common sources of CSS bugs. Items that don't center, content that overflows, layouts that break on mobile — these usually trace back to applying flex properties to the wrong element (the item instead of the container, or vice versa) or misunderstanding the main vs cross axis.