Core Web Technologies

CSS Flexbox

A one-dimensional layout model for rows or columns.

Definition

Flexbox is a CSS layout mode that distributes space along a single axis — either horizontally (row) or vertically (column). It handles alignment, spacing, and sizing of child elements without requiring floats or manual positioning. Most navigation bars, card rows, and form layouts use flexbox.

Example

.nav { display: flex; gap: 16px; align-items: center; } arranges navigation links in a horizontal row with equal 16px gaps, centered vertically.

See it in context Learn how CSS Flexbox fits into the bigger picture of how software actually works.

Read the Guide →