Ausrichtung von Flexbox-Blöcken entlang der Querachse in CSS
Lasst uns nun die Blöcke auch entlang der Querachse
ausrichten. Die Ausrichtung entlang dieser Achse
wird durch die Eigenschaft align-items festgelegt. Der Wert
flex-start drückt die Elemente an den Anfang der
Achse, und der Wert flex-end - an das Ende.
Lasst es uns an Beispielen versuchen.
Beispiel
Richten wir die Hauptachse von links nach rechts aus. In diesem Fall verläuft die Querachse von oben nach unten. Lasst uns die Positionierung unserer Blöcke sowohl entlang der Hauptachse als auch entlang der Querachse anpassen.
Entlang der Hauptachse drücken wir die Blöcke an ihren Anfang,
also an den linken Rand. Dafür setzen wir justify-content
auf den Wert flex-start. Entlang
der Querachse drücken wir die Blöcke ebenfalls an ihren Anfang,
also an den oberen Rand. Dafür setzen wir align-items
ebenfalls auf den Wert flex-start.
Sehen wir uns an, was wir erhalten:
.parent {
display: flex;
flex-direction: row; /* Hauptachse nach rechts, Querachse nach unten */
justify-content: flex-start; /* Blöcke an den Anfang der Hauptachse */
align-items: flex-start; /* Blöcke an den Anfang der Querachse */
}
Ergebnis der Codeausführung:
Beispiel
Lasst uns nun die Blöcke an das Ende der Querachse
drücken, also nach unten. Dafür setzen wir align-items
auf den Wert flex-end:
.parent {
display: flex;
flex-direction: row; /* Hauptachse nach rechts, Querachse nach unten */
justify-content: flex-start; /* Blöcke an den Anfang der Hauptachse */
align-items: flex-end; /* Blöcke an das Ende der Querachse */
}
Ergebnis der Codeausführung:
Beispiel
Richten wir nun die Hauptachse von oben nach unten aus. Da die Hauptachse vertikal ist, wird die Querachse von rechts nach links verlaufen. Lasst uns die Blöcke entlang beider Achsen an deren Anfang drücken:
.parent {
display: flex;
flex-direction: column; /* Hauptachse nach unten, Querachse nach rechts */
justify-content: flex-start; /* Blöcke an den Anfang der Hauptachse */
align-items: flex-start; /* Blöcke an den Anfang der Querachse */
}
Ergebnis der Codeausführung:
Beispiel
Und nun drücken wir die Blöcke entlang der Querachse an deren Ende:
.parent {
display: flex;
flex-direction: column; /* Hauptachse nach unten, Querachse nach rechts */
justify-content: flex-start; /* Blöcke an den Anfang der Hauptachse */
align-items: flex-end; /* Blöcke an das Ende der Querachse */
}
Ergebnis der Codeausführung:
Beispiel
Drücken wir die Blöcke an das Ende beider Achsen:
.parent {
display: flex;
flex-direction: column; /* Hauptachse nach unten, Querachse nach rechts */
justify-content: flex-end; /* Blöcke an das Ende der Hauptachse */
align-items: flex-end; /* Blöcke an das Ende der Querachse */
}
Ergebnis der Codeausführung:
Beispiel
Lasst uns die Richtung der Hauptachse ändern - richten wir sie von unten nach oben aus. Dabei ändert die Querachse ihre Richtung nicht, da die Hauptachse nach wie vor vertikal ist.
Drücken wir die Blöcke an den Anfang beider Achsen:
.parent {
display: flex;
flex-direction: column-reverse; /* Hauptachse nach oben, Querachse nach rechts */
justify-content: flex-start; /* Blöcke an den Anfang der Hauptachse */
align-items: flex-start; /* Blöcke an den Anfang der Querachse */
}
Ergebnis der Codeausführung:
