Flexbox Fundamentals

Flexbox is a one-dimensional layout system designed for arranging items in a row or a column, distributing space and aligning content with far less code than older techniques (floats, inline-block hacks).

.container {
  display: flex;
  flex-direction: row; /* row (default) | column | row-reverse | column-reverse */
  gap: 16px;
}

Once display: flex is set on a parent (the flex container), its direct children (the flex items) automatically arrange themselves in a row, side by side, without needing float or inline-block.

Sizing flex items individually:

.item {
  flex-grow: 1;   /* how much extra space this item claims, relative to siblings */
  flex-shrink: 1; /* how much this item shrinks when space is tight */
  flex-basis: 200px; /* the item's starting size before growing/shrinking */
}

/* Common shorthand */
.item { flex: 1; } /* equivalent to flex-grow: 1; flex-shrink: 1; flex-basis: 0 */

flex: 1 on every item in a container makes them share the available space equally — a very common pattern for building equal-width columns without calculating percentages manually.

gap creates consistent spacing between flex items without needing margin hacks that used to require :not(:last-child) selectors to avoid extra space at the edges — gap only adds space between items, never on the outer edges.

Flexbox fundamentally solves problems that used to require complex float-clearing and manual width calculations, and remains the right tool whenever content flows in a single row or column.