Flexbox

Flexbox is a one-directional layout mode, enabled by display: flex on a container. Its children, the flex items, are aligned along a main axis (row or column) and share the available space. It suits navigation bars, rows of cards, and simple alignments.

Example

nav {
  display: flex;
  gap: 1rem;
}

Related concepts

The whole glossary