Ausrichtung von Flex-Elementen entlang der Hauptachse in CSS
Die Eigenschaft justify-content ermöglicht es,
Elemente entlang der Hauptachse auszurichten. Zuvor
hast du bereits die Werte center,
space-between, space-around,
space-evenly kennengelernt. Lass uns nun
einige weitere Werte studieren.
Der Wert flex-start drückt die Elemente an den Anfang
der Hauptachse, und der Wert flex-end - an das Ende.
Lass uns das an Beispielen sehen.
Beispiel
Lass uns die Hauptachse von links nach rechts ausrichten, indem wir
der Eigenschaft flex-direction den Wert row zuweisen.
Drücken wir die Blöcke an den Anfang der Achse. Dazu setzen wir justify-content
auf den Wert flex-start:
.parent {
display: flex;
flex-direction: row; /* Hauptachse von links nach rechts */
justify-content: flex-start; /* Blöcke an den Anfang der Hauptachse */
}
Ergebnis der Codeausführung:
Beispiel
Lass uns nun die Blöcke an das Ende der Achse drücken.
Dazu setzen wir justify-content
auf den Wert flex-end:
.parent {
display: flex;
flex-direction: row; /* Hauptachse von links nach rechts */
justify-content: flex-end; /* Blöcke an das Ende der Hauptachse */
}
Ergebnis der Codeausführung:
Beispiel
Lass uns nun die Hauptachse von rechts nach links ausrichten,
indem wir der Eigenschaft flex-direction den Wert
row-reverse zuweisen. Drücken wir die Blöcke an den Anfang
der Achse, also an den rechten Rand. Dazu setzen wir justify-content
auf den Wert flex-start:
.parent {
display: flex;
flex-direction: row-reverse; /* Hauptachse von rechts nach links */
justify-content: flex-start; /* Blöcke an den Anfang der Hauptachse */
}
Ergebnis der Codeausführung:
Beispiel
Und jetzt lass uns die Blöcke an das Ende der Hauptachse drücken,
also an den linken Rand. Dazu setzen wir justify-content
auf den Wert flex-end:
.parent {
display: flex;
flex-direction: row-reverse; /* Hauptachse von rechts nach links */
justify-content: flex-end; /* Blöcke an das Ende der Hauptachse */
}
Ergebnis der Codeausführung:
Beispiel
In den vorherigen Beispielen war die Hauptachse horizontal ausgerichtet. Lass uns sie nun umdrehen und vertikal ausrichten.
Lass uns die Hauptachse nach unten ausrichten, indem wir
der Eigenschaft flex-direction den Wert
column zuweisen.
Drücken wir die Blöcke an den Anfang der Hauptachse, also
an den oberen Rand. Dazu setzen wir justify-content
auf den Wert flex-start:
.parent {
display: flex;
flex-direction: column; /* Hauptachse von oben nach unten */
justify-content: flex-start; /* Blöcke an den Anfang der Hauptachse */
}
Ergebnis der Codeausführung:
Beispiel
Lass uns nun die Blöcke an das Ende der Hauptachse drücken,
also an den unteren Rand. Dazu setzen wir justify-content
auf den Wert flex-end:
.parent {
display: flex;
flex-direction: column; /* Hauptachse von oben nach unten */
justify-content: flex-end; /* Blöcke an das Ende der Hauptachse */
}
Ergebnis der Codeausführung:
Beispiel
Lass uns die Hauptachse umdrehen, indem wir sie von unten
nach oben ausrichten. Dazu weisen wir der Eigenschaft flex-direction
den Wert column-reverse zu. In
diesem Fall ändern die Blöcke ihre Reihenfolge -
am Anfang der Achse wird der letzte Block im HTML-Code stehen.
Lass uns die Blöcke an den Anfang der Hauptachse drücken,
also an den unteren Rand. Dazu setzen wir justify-content
auf den Wert flex-start:
.parent {
display: flex;
flex-direction: column-reverse; /* Hauptachse von unten nach oben */
justify-content: flex-start; /* Blöcke an den Anfang der Hauptachse */
}
Ergebnis der Codeausführung:
Beispiel
Lass uns die Blöcke an das Ende der Hauptachse drücken,
also an den oberen Rand. Dazu setzen wir justify-content
auf den Wert flex-end:
.parent {
display: flex;
flex-direction: column-reverse; /* Hauptachse von unten nach oben */
justify-content: flex-end; /* Blöcke an das Ende der Hauptachse */
}
Ergebnis der Codeausführung:
