Ausrichtung auf der Querachse
Das Logo und die Links stehen jetzt an den beiden Enden der Navigationsleiste, aber beide kleben an ihrem oberen Rand, und die Links sind nicht einmal auf einer Höhe mit dem Logo. Wir hätten sie gern in der Mitte der Höhe der Leiste.
Die Position der Items auf der Querachse legt die Eigenschaft align-items des Flex-Containers fest. In einer Reihe geht die Querachse von oben nach unten, align-items verschiebt die Items also nach oben und unten:
stretch: Die Items werden über die ganze Querachse gestreckt, in einer Reihe sind sie also so hoch wie der Container. Nur Items ohne festgelegte Höhe werden gestreckt. Das bekommst du, wenn du align-items nicht festlegst.
flex-start: Die Items stehen am Anfang der Querachse (in einer Reihe oben) und sind nur so hoch wie ihr Inhalt.
center: Die Items stehen in der Mitte.
flex-end: Die Items stehen am Ende (in einer Reihe unten).
Unser Logo und die Links sind auf die volle Höhe der Navigationsleiste gestreckt, aber ihr Text bleibt oben in jedem von ihnen. Deshalb sehen sie aus, als klebten sie oben.
Das Strecken ist auch nützlich: Dank ihm sind alle unsere Rassen-Karten gleich hoch, obwohl manche mehr Text haben als andere. Scrolle nach unten und sieh nach.
So schreibst du es:
Anweisungen
- 1
Füge in der Regel für
.navigationdie Deklarationalign-items: centerhinzu. Das Logo und die Links rücken in die Mitte der Höhe der Leiste.