Main Axis Alignment
Now let's lay out the navigation bar at the top of the page. We want the logo on the left and the links on the right, a layout you'll find on most websites.
The navigation bar (the nav element with the class navigation) has two children: the logo and the div with the class links, which holds the three links. When we make the navigation bar a flex container, these two children become its flex items.
How the items are spread along the main axis is set by the justify-content property of the flex container. Here are its values, shown on three items in a row:
flex-start: the items are at the start of the main axis. This is where they are when you don't set justify-content.
center: the items are in the middle.
flex-end: the items are at the end.
space-between: the first item is at the start, the last one at the end, and the spaces between the items are equal.
space-around: every item has the same space on both sides, so the spaces at the edges are half the size of the spaces between the items.
space-evenly: all the spaces are equal, between the items and at the edges.
The space that the items don't take up is called free space. With space-between, all of it goes between the items, which is just what our navigation bar needs.
Instructions
In the rule for .navigation, add the declaration display: flex. The logo and the links now stand side by side.
Add the declaration justify-content: space-between. The logo stays on the left, and the links move to the right.
Start programming for free
2/8