Für die Gestaltung einer Webseite ist nicht nur die Farbgebung – zum Beispiel über CSS Gradient – wichtig, sondern auch die Platzierung von Abständen. Neben dem Padding gibt es so zum Beispiel auch die Eigenschaft Justify Content im CSS. Was mithilfe dieses Tools bewirkt wird und wie man es nutzen kann, erfährst Du nun.
Inhalt
Was ist Justify Content im CSS?
Diese Eigenschaft findet im CSS Verwendung.
Justify Content legt fest, wie man die inhaltlichen Elemente – der Content – in einem Flex-Container platziert. Genauer: Inwieweit die Elemente Raum in Relation zur Hauptachse dieses Containers sowie in Abhängigkeit zum Grid-Container finden.
Daher hilft es dabei, den Inhalt eines flexiblen Containers zu positionieren und zu organisieren. Man kann es also verwenden, um ansprechende Layouts zu erstellen.
Anwendung und Formen
Justify Content akzeptiert verschiedene Werte, die bestimmen, wie die sich Elemente im Flex-Container aufteilen. Welche Werte gehören dazu?
- flex-start: Mit dieser Attribuierung kann man alle Elemente am Beginn der Flex-Container-Hauptachse platzieren. Folgend verteilt sich der Content auf der Achse nach hinten. Es kann vorkommen, dass am Schluss Abstände entstehen.
- flex-end: Die Hinzugabe dieses Wertes bedeutet essenziell die dasselbe wie „flex-start“ – mit dem Unterschied, dass in diesem Fall die Richtung (vom Ende zum Anfang) geändert ist.
- center: Der center-Wert positioniert alle Elemente gleichmäßig in der Mitte der Flex-Container-Hauptachse. Abstände können am Anfang und am Ende der Achse auftreten.
- left/right: Funktioniert in derselben Weise wie der center-Wert, lediglich ausgehend von links oder rechts.
- space-between: Ähnlich wie der center-Wert verteilt man mit „space-between“ jeglichen Content, den man hat, von der Mitte der Hauptachse ausgehend gleichmäßig im flexiblen Container. Der Unterschied zu „center“ besteht darin, dass es keine Abstände am Anfang und am Schluss der Achse gibt.
- space-around: Auch dieser Wert hat seinen Start in der Hauptachsenmitte des Flex-Containers, mit jeweils gleichbleibenden Abständen zwischen den Inhaltselementen. Er bewirkt dasselbe – mit dem Unterschied, dass die Abstände zu Beginn und zum Schluss der Achse um die Hälfte reduziert sind.
- space-evenly: Bei diesem Wert gilt ebenfalls dasselbe (ausgehend von der Mitte, regelmäßig verteilte Inhaltselemente). Was bildet hierbei das Unterscheidungskriterium? Die Abstände zu Beginn und zum Schluss der Achse sind mit denen zwischen den jeweiligen Inhaltselementen identisch.
- normal: Dieser Wert stellt die Standarteinstellung dar. Seine Wirkung auf der angezeigten Webseite ähnelt „stretch“.
- stretch: Wichtig – diese Wertzuschreibung funktioniert lediglich bei Grid-Containern! Durch den stretch-Wert werden alle Inhaltselemente so gestreckt, dass sie den Raum des Containers vollkommen füllen.
- safe/unsafe: Diese beiden Werten geben an, wie (un-)sicher es ist, dass die Verteilung der Inhaltselemente aus dem entsprechenden Container hinausgehen oder nicht. Dadurch ist zum Beispiel die Lesefreundlichkeit einer Webseite abhängig. Man vermeidet ein „Überlaufen“.
Willst Du nun zum Beispiel den Eingabebefehl für Justify Content im CSS vornehmen, schreibst Du an die entsprechende Stelle im Code Folgendes:
.verteilt { justify-content: value; }„value“ ändert sich hierbei je nachdem, welchen Wert Du einsetzen willst – ob „center“, „space-evenly“ oder Ähnliches ist komplett Dir überlassen.
Auf einen Blick
Die Einstellung von Justify Content im CSS ist also sehr nützlich, wenn es darum geht, den Inhalt eines flexiblen Containers zu positionieren und zu organisieren. Mithilfe von unterschiedlichen Wertzuschreibungen kann man es verwenden, um ansprechende Layouts am Laptop oder PC zu erstellen sowie den Inhalt eines Flex-Containers an die Anforderungen des Benutzers anzupassen, und stellt ein mächtiges Werkzeug beim Programmieren dar, das dabei hilft, ansprechende Layouts zu erstellen.
FAQ zu Justify Content im CSS
Hierbei handelt es sich im eine Eigenschaft im CSS, die dabei helfen kann, Inhaltselemente im Flex-Container zu platzieren.
Man nutzt es über den Eingabebefehl: justify-content. Je nachdem, wie man den Raum verteilen möchte, folgt danach noch die entsprechende Wertzuschreibung.
Genutzt werden kann hierbei zum Beispiel: justify-content (für Inhaltselemente) oder text-align (für Texte/Textblöcke).