Ausrichtung auf der Hauptachse
Ordnen wir jetzt die Navigationsleiste oben auf der Seite an. Wir wollen das Logo links und die Links rechts, ein Layout, das du auf den meisten Websites findest.
Die Navigationsleiste (das Element nav mit der Klasse navigation) hat zwei Kinder: das Logo und das div mit der Klasse verweise, das die drei Links enthält. Wenn wir die Navigationsleiste zu einem Flex-Container machen, werden diese beiden Kinder zu ihren Flex-Items.
Wie die Items entlang der Hauptachse verteilt werden, legt die Eigenschaft justify-content des Flex-Containers fest. Hier sind ihre Werte, gezeigt an drei Items in einer Reihe:
flex-start: Die Items stehen am Anfang der Hauptachse. Dort sind sie, wenn du justify-content nicht festlegst.
center: Die Items stehen in der Mitte.
flex-end: Die Items stehen am Ende.
space-between: Das erste Item steht am Anfang, das letzte am Ende, und die Abstände zwischen den Items sind gleich groß.
space-around: Jedes Item hat auf beiden Seiten gleich viel Platz, die Abstände an den Rändern sind also halb so groß wie die Abstände zwischen den Items.
space-evenly: Alle Abstände sind gleich groß, zwischen den Items und an den Rändern.
Der Platz, den die Items nicht einnehmen, heißt freier Platz (free space). Bei space-between geht er ganz zwischen die Items, genau das, was unsere Navigationsleiste braucht.
So schreibst du es:
Anweisungen
- 1
Füge in der Regel für
.navigationdie Deklarationdisplay: flexhinzu. Das Logo und die Links stehen jetzt nebeneinander. - 2
Füge die Deklaration
justify-content: space-betweenhinzu. Das Logo bleibt links, und die Links rücken nach rechts.