CSS justify-content Eigenschaft

Definition und Verwendung

justify-content Eigenschaft (horizontale) Ausrichtung der flexiblen Container-Elemente, wenn die Elemente nicht den gesamten verfügbaren Raum auf der Hauptachse ausfüllen.

Hinweis:Verwenden Sie align-items Eigenschaft Eigenschaft zur vertikalen Ausrichtung von Elementen.

Weitere Informationen:

CSS Anleitung:CSS flexbox

CSS Anleitung:CSS Grid

CSS Referenzhandbuch:align-content Eigenschaft

CSS Referenzhandbuch:align-items Eigenschaft

CSS Referenzhandbuch:align-self Eigenschaft

HTML DOM Referenzhandbuch:justifyContent Eigenschaft

Beispiel

Aligniere elastische Elemente in der Mitte des Behälters:

div {
  display: flex;
  justify-content: center;
}

Versuchen Sie es selbst

Mehr TIY-Beispiele finden Sie unten auf der Seite.

CSS Syntax

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

Eigenschaftswert

Wert Beschreibung
flex-start Standardwert. Elemente sind am Anfang des Behälters positioniert.
flex-end Elemente sind am Ende des Behälters positioniert.
center Elemente sind in der Mitte des Behälters positioniert.
space-between Elemente haben zwischen den Zeilen Abstand.
space-around Elemente haben vor, zwischen und nach den Zeilen Platz.
initial Setze diese Eigenschaft auf ihren Standardwert. Siehe: initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe: inherit.

Technische Details

Standardwert: flex-start
Vererbung: Nein
Animationserstellung: Nicht unterstützt. Siehe:Animationsspezifische Eigenschaften.
Version: CSS3
JavaScript Syntax: object.style.justifyContent="space-between"

Mehr Beispiele

Beispiel

Aligniere elastische Elemente am Anfang des Behälters (Standard):

div {
  display: flex;
  justify-content: flex-start;
}

Versuchen Sie es selbst

Beispiel

Aligniere elastische Elemente am Ende des Behälters:

div {
  display: flex;
  justify-content: flex-end;
}

Versuchen Sie es selbst

Beispiel

Zeige mit Abstand elastische Elemente zwischen den Zeilen an:

div {
  display: flex;
  justify-content: space-between;
}

Versuchen Sie es selbst

Beispiel

Zeige mit Abstand elastische Elemente vor, zwischen und nach den Zeilen an:

div {
  display: flex;
  justify-content: space-around;
}

Versuchen Sie es selbst

Browserunterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.

Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt. Die Nutzung der Präfixe wird durch die Nummern vor -webkit- oder -moz- bestimmt.

Eigenschaft Chrome IE Firefox Safari Opera
justify-content 29.0
21.0 -webkit- 		11.0 28.0
18.0 -moz- 		9.0
6.1 -webkit- 		17.0