Flex-Container

In der vorigen Lektion hast du gesehen, wie der Browser Elemente im normalen Fluss platziert: Block-Elemente stapeln sich von oben nach unten, und Inline-Elemente reihen sich wie Wörter in einem Satz nebeneinander auf. Aber Webseiten sind voller Boxen nebeneinander: Navigationsleisten, Reihen von Karten, ein Logo links und Links rechts. CSS hat ein Werkzeug genau dafür, Boxen so anzuordnen: Flexbox (kurz für Flexible Box Layout).

Für diese Lektion haben wir unsere Katzenseite erweitert: Oben steht eine Navigationsleiste mit einem Logo und Links zu den Abschnitten, der Titelbereich hat einen Untertitel, und aus der Liste der Rassen sind vier Karten geworden. Bisher steht alles einfach untereinander. Um die Karten zu sehen, scrolle in der Vorschau nach unten. Im Lauf dieser Lektion ordnen wir die Seite mit Flexbox an.

Flexbox wird mit der Deklaration display: flex beim Elternelement der Elemente eingeschaltet, die wir anordnen wollen:

.container {
	display: flex;
}

Das Element mit display: flex wird zum Flex-Container, und seine Kinder werden zu Flex-Items. Die Items reihen sich in einer Reihe nebeneinander auf, von links nach rechts. Nur die Kinder des Containers werden zu Flex-Items, nicht deren eigene Kinder: Der Inhalt in jedem Item wird weiterhin wie bisher angeordnet.

Flexbox platziert Items entlang von zwei Richtungen, den Achsen. Die Hauptachse (main axis) ist die Richtung, in der die Items nacheinander aufgereiht werden. In einer Reihe geht sie von links nach rechts. Die Querachse (cross axis) kreuzt sie im rechten Winkel, in einer Reihe geht sie also von oben nach unten. Links im Bild siehst du eine Reihe. Rechts ist eine Spalte, die du später in dieser Lektion zu erstellen lernst.

In den nächsten Übungen helfen uns die Achsen dabei zu sagen, wohin die Items sollen.