Spalten
Als Nächstes kommt der Hero. Seine Schlagzeile, der Text und der Link stehen untereinander, aber die Schlagzeile und der Text berühren sich. Machen wir den Hero zu einem Flex-Container in einer Spalte: Dann können wir seine Items mit gap auseinanderrücken und sie später in dieser Lektion zentrieren.
Die Richtung der Hauptachse (die Eigenschaft flex-direction) legen diese Klassen fest:
| Klasse | CSS | Richtung |
|---|---|---|
flex-row | flex-direction: row; | eine Zeile von links nach rechts (der Standard) |
flex-col | flex-direction: column; | eine Spalte von oben nach unten |
flex-row-reverse | flex-direction: row-reverse; | eine Zeile von rechts nach links |
flex-col-reverse | flex-direction: column-reverse; | eine Spalte von unten nach oben |
Achtung: flex-col sagt nur, in welche Richtung die Items gehen. Der Container braucht außerdem die Klasse flex; ohne sie ist er gar kein Flex-Container.
Wie du aus dem CSS-Kurs weißt, drehen sich die Achsen mit der Richtung. In einer Spalte verläuft die Hauptachse von oben nach unten und die Querachse von links nach rechts. In einer Spalte verschiebt justify-* die Items also nach oben und unten, und items-* verschiebt sie nach links und rechts.
So schreibst du es:
Anweisungen
- 1
Füge dem Hero (dem
sectionmit dem orangen Hintergrund) die Klassenflex flex-colhinzu. Die Items stehen untereinander wie vorher, aber sieh dir den Link an: Er ist jetzt so breit wie der ganze Hero. In einer Spalte verläuft die Querachse von links nach rechts, und Flex-Items werden entlang ihr gestreckt (items-stretchist der Standard). Als Flex-Item wird der Link wie ein Block ausgelegt, seininline-blockspielt also keine Rolle mehr. - 2
Füge die Klasse
gap-4hinzu. Die Schlagzeile, der Text und der Link rücken 16 px auseinander. - 3
Füge die Klasse
items-starthinzu. Die Items werden nicht mehr gestreckt: Jedes ist nur so breit, wie sein Inhalt es braucht, und steht am Anfang der Querachse, also links.