Richtung und Zentrieren

Als Nächstes kommt der Titelbereich: das div mit der Klasse titel-hintergrund, das die Hauptüberschrift und einen Untertitel enthält. Wir hätten sie gern untereinander und zentriert, sowohl horizontal als auch vertikal.

Bisher standen unsere Flex-Items immer in einer Reihe. Die Richtung der Hauptachse legt die Eigenschaft flex-direction des Flex-Containers fest:

• row: eine Reihe von links nach rechts. Das ist der Standard.
• column: eine Spalte von oben nach unten.
• row-reverse und column-reverse: eine Reihe von rechts nach links oder eine Spalte von unten nach oben, das letzte Item steht also zuerst.

Wenn sich die Richtung ändert, drehen sich die Achsen mit. In einer Spalte geht die Hauptachse von oben nach unten und die Querachse von links nach rechts:

Und weil justify-content immer auf der Hauptachse wirkt und align-items auf der Querachse, verschiebt justify-content in einer Spalte die Items vertikal und align-items horizontal. Um etwas in beide Richtungen zu zentrieren, brauchst du beide, egal welche Richtung:

.container {
	display: flex;
	flex-direction: column;
	justify-content: center; /* in einer Spalte: vertikal */
	align-items: center; /* in einer Spalte: horizontal */
}

Etwas vertikal zu zentrieren war in CSS früher ein bekanntes Problem. Mit Flexbox braucht es nur ein paar Deklarationen.