Flexbox: one axis at a time

Flexbox is a one-dimensional layout tool. You pick a main axis (row or column) and the children line up along it. justify-content controls spacing along the main axis. align-items controls spacing across it. That is the entire mental model.

Two flex containers, two layout decisions. The parent uses space-between to push the logo and the link group to opposite ends. The link group uses gap to space its own children evenly. This is the bread-and-butter pattern for almost every navigation bar on the modern web.