Split a navigation bar into two groups with Flexbox

My logo and my nav links all sit on the same side. I want the last link pushed to the far edge instead.

BeginnerRead 4 minDoing: 30 to 45 minutes6 steps

What you'll have at the end

A nav bar where the logo and primary links stay clustered on one side and a small group of secondary links sits pushed to the far edge, vertically lined up and evenly spaced, built from one flex row and a single margin rule that keeps working in either reading direction.

Before you start

You need

A nav bar in your markup holding a logo and a handful of links as plain flow content, not yet laid out with Flexbox.

Not covered

This does not cover collapsing the bar into a mobile hamburger menu at narrow widths, or centering the whole bar's contents instead of splitting them apart; it only covers keeping one group on each edge.

Leans on

6 steps

Where to go next

Turn on box-sizing border-box before your first layout

for making sure padding on the CTA links doesn't quietly widen the bar once you start styling them

Give a hover and focus state a smooth transition

for animating the hover and focus states on these same nav links once the layout itself is settled

Checked 20 Aug 2026

Part of the CSS cookbook