CSS Flexbox

Flexbox (the CSS Flexible Box Layout) arranges items in a single row or column and controls how they share space, align and wrap. It is enabled with display: flex on a container, whose direct children become flex items.

justify-content aligns items along the main axis (such as space-between or center), align-items aligns them on the cross axis, flex-wrap lets them wrap to new lines and gap sets the spacing. On the items, flex-grow, flex-shrink and flex-basis decide how they stretch. Flexbox is ideal for navigation bars, toolbars and centring things; CSS Grid suits two-dimensional page layouts.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}