Start a Flexbox layout

Flexbox lays direct children out along one main axis. The cross axis runs perpendicular to it.

.navigation {
  display: flex;
  gap: 1rem;
}

The direct children become flex items. In a left-to-right horizontal writing mode, the default row main axis runs left to right. Do not equate “row” permanently with “horizontal”: writing mode and direction influence the logical axes.

Container properties such as flex-direction, justify-content, align-items, flex-wrap, and gap organize the group. Item properties such as flex, align-self, and order affect individual children.

By default, items do not wrap, can shrink, and stretch on the cross axis when their cross size is automatic. Their automatic minimum size can still prevent them from becoming narrower than unbreakable content.

Flexbox does not change the HTML order. Keep the source order logical even if a visual property can rearrange items.

Enable the Flexbox overlay in DevTools. Switch flex-direction between row and column, then identify the main and cross axes before changing any alignment property. This prevents the common habit of guessing between justify-content and align-items.