Ausrichten
Die Navigation selbst hat drei sichtbare Kinder: das Logo, die Liste der Links und den Button „Spenden“. (Der versteckte Button „Menü“ zählt nicht: Ein Element mit display: none wird gar nicht ausgelegt.) Ordnen wir sie in einer Zeile an, mit dem Logo links und dem Button rechts.
Wie du aus dem CSS-Kurs weißt, verteilt die Eigenschaft justify-content die Items entlang der Hauptachse, und align-items platziert sie auf der Querachse. Ihre Werte haben ebenfalls Klassen: justify-* für justify-content und items-* für align-items. Die Namen sind kürzer als die Werte, weil Tailwind die Wörter flex- und space- weglässt:
| Klasse | 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; |
Ohne diese Klassen verhält sich ein Flex-Container wie mit justify-start und items-stretch, genau wie in CSS.
So schreibst du es:
Anweisungen
- 1
Füge dem Element
navdie Klasseflexhinzu. Das Logo, die Links und der Button „Spenden“ stehen nebeneinander. Und das Padding des Buttons braucht jetzt Platz: Als Flex-Item wird der Link wie ein Block ausgelegt. - 2
Füge die Klasse
justify-betweenhinzu. Das Logo bleibt links, der Button wandert an den rechten Rand, und die Links stehen dazwischen, mit gleich viel Platz auf beiden Seiten. - 3
Das Logo, die Links und der Button sind auf die Höhe des höchsten von ihnen gestreckt, des Buttons, und ihr Text bleibt oben. Deshalb sitzen die Links etwas höher als der Text des Buttons. Füge die Klasse
items-centerhinzu, und alles ist vertikal zentriert.