A nav bar with space between
Nearly every site header is the same shape: brand on the left, links on the
right, one rule doing the pushing. That rule is justify-content: space-between
- and it does not push anything apart. It measures the width left over in the
container after the items have been laid out, then hands all of it to the gaps
between them.
Left over is the whole idea. A flex container that is exactly as wide as its
contents has nothing left over, so space-between shares out zero, and every
item stays exactly where it already was. Nothing errors. The rule is spelled
right, it is on the right element, it is applying, and it is doing nothing. So
when it looks broken, the question is never "is my syntax wrong". It is "does
this box have any spare width to give away?"
Lining the row up is the other half of a bar. A 22px brand next to 15px links
will not line up by itself: by default flex items stretch to match the tallest
one, and text sits at the top of a stretched box. align-items: center puts
each item in the middle of the bar instead.
Your task: the header below is display: inline-flex, and an inline-level
box is only ever as wide as its contents - you can see it in the preview, where
the dark bar stops right after "Log in" instead of reaching the edge of the
page. Make it a real header: the bar spans the page, the brand stays left, the
three links sit hard against the right edge, and everything lines up down the
middle of the 64px bar. Use justify-content: space-between and
align-items: center - and give them some spare width to work with.
You'll practice:
- Reading
space-between as "share out the width left over", not "push things apart"
- Lining a row of different-sized items up across a bar with
align-items: center
Related reading: Flexbox: One-Dimensional Layout →