Glossary

Flexbox (CSS)

Flexbox (Flexible Box Layout) is a CSS layout model for aligning items in a single row or column. It solves classic layout challenges: vertical centring, even distribution, responsive nav bars.

Key container properties

.container {
  display: flex;
  flex-direction: row | column;        /* axis */
  justify-content: flex-start | center | space-between | space-around;
  align-items: stretch | center | flex-start | flex-end;
  flex-wrap: nowrap | wrap;            /* wrap to next line */
  gap: 16px;                           /* space between items */
}

Item properties

.item {
  flex: 1;           /* grow + shrink + basis = equal distribution */
  flex-grow: 2;      /* take twice as much free space */
  align-self: center; /* individual alignment */
  order: -1;         /* reorder without changing HTML */
}

Flexbox vs Grid

Flexbox is one-dimensional (row OR column). CSS Grid is two-dimensional (rows AND columns simultaneously). For nav bars and card lists — Flexbox. For complex page layouts — Grid.