Cross Axis Alignment
The logo and the links are at the two ends of the navigation bar now, but they're both stuck to its top edge, and the links aren't even level with the logo. We'd like them in the middle of the bar's height.
The position of the items on the cross axis is set by the align-items property of the flex container. In a row, the cross axis goes from top to bottom, so align-items moves the items up and down:
stretch: the items are stretched along the whole cross axis, so in a row, they're as tall as the container. Only items without a set height are stretched. This is what you get when you don't set align-items.
flex-start: the items are at the start of the cross axis (in a row, at the top), and they're only as tall as their content.
center: the items are in the middle.
flex-end: the items are at the end (in a row, at the bottom).
Our logo and links are stretched to the full height of the navigation bar, but their text stays at the top of each of them. That's why they look stuck to the top.
Stretching is useful too: thanks to it, all our breed cards are equally tall, even though some of them have more text than others. Scroll down and have a look.
Instructions
In the rule for .navigation, add the declaration align-items: center. The logo and the links move to the middle of the bar's height.
Start programming for free
3/8