Justify and Align
The navigation itself has three visible children: the logo, the list of links and the Donate button. (The hidden Menu button doesn't count: an element with display: none isn't laid out at all.) Let's put them in a row, with the logo on the left and the button on the right.
As you know from the CSS course, the items are spread along the main axis by the property justify-content and placed on the cross axis by align-items. Their values have classes too: justify-* for justify-content and items-* for align-items. The names are shorter than the values, because Tailwind leaves out the words flex- and space-:
| Class | CSS |
|---|---|
justify-start | justify-content: flex-start; |
justify-center | justify-content: center; |
justify-end | justify-content: flex-end; |
justify-between | justify-content: space-between; |
justify-around | justify-content: space-around; |
justify-evenly | justify-content: space-evenly; |
items-stretch | align-items: stretch; |
items-start | align-items: flex-start; |
items-center | align-items: center; |
items-end | align-items: flex-end; |
items-baseline | align-items: baseline; |
Without these classes, a flex container behaves as with justify-start and items-stretch, just like in CSS.
Instructions
Add the class flex to the nav element. The logo, the links and the Donate button stand side by side. And the button's padding now takes up space: as a flex item, the link is laid out as a block.
Add the class justify-between. The logo stays on the left, the button moves to the right edge, and the links are in between, with the same space on both sides.
The logo, the links and the button are stretched to the height of the tallest of them, the button, and their text stays at the top. That's why the links sit a bit higher than the text of the button. Add the class items-center, and everything is centered vertically.
Start programming for free
3/11