CSS justify-items-Eigenschaft

Definition und Verwendung

Die justify-items-Eigenschaft wird auf dem Grid-Container festgelegt, um den Abstand der nachfolgenden Elemente (Grid-Elemente) in der Zeilenrichtung auszurichten.

Für englische Seiten verläuft die Zeilenrichtung von links nach rechts, die Blockrichtung nach unten.

Um diesem Attribut einen Ausrichtungeffekt zu verleihen, muss das Grid-Element in der Zeilenrichtung um sich selbst herum ausreichend Platz haben.

Tipp:Um Grid-Elemente in der Blockrichtung anstatt in der Zeilenrichtung auszurichten, verwenden Sie align-items-Eigenschaft Eigenschaften.

Weitere Informationen:

CSS-Tutorial:CSS Grid

CSS-Tutorial:CSS-Positionierung

CSS-Referenzhandbuch:align-items-Eigenschaft

CSS-Referenzhandbuch:direction-Eigenschaft

CSS-Referenzhandbuch:grid-Eigenschaft

CSS-Referenzhandbuch:grid-template-columns-Eigenschaft

CSS-Referenzhandbuch:justify-self-Eigenschaft

CSS-Referenzhandbuch:position-Eigenschaft

CSS-Referenzhandbuch:writing-mode-Eigenschaft

Beispiel

Beispiel 1

Jedes Grid-Element wird am Ende seiner Grid-Zelle in der Zeilenrichtung ausgerichtet:

#container {
  display: grid;
  justify-items: end;
}

Versuchen Sie es selbst

Beispiel 2: justify-items im Vergleich zu justify-self

Die Ausrichtung relativ zum Container wird auf 'zentriert' gesetzt, während die Ausrichtung des Grid-Elements selbst auf 'right-align' gesetzt wird. Der Wert 'right' hat Vorrang:

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

Versuchen Sie es selbst

Beispiel 3: justify-items auf einem elementaren Grid-Projekt setzen

Setzen Sie die Ausrichtung des Elements mit absoluter Position auf 'right-align':

#container {
  display: grid;
  position: relative;
  justify-items: right;
}
.blue {
  position: absolute;
}

Versuchen Sie es selbst

Beispiel 4: writing-mode

Wenn der Wert der writing-mode-Eigenschaft des Grid-Container-Elements auf vertical-rl gesetzt ist, verläuft die Zeilenrichtung nach unten. Das Ergebnis ist, dass der Anfang des Containers von links nach oben und der Ende des Containers von rechts nach unten verschoben wird:

#container {
  justify-items: end;
  writing-mode: vertical-rl;
}

Versuchen Sie es selbst

Beispiel 5: direction

Wenn der Wert der Eigenschaft direction des Rasterbehälters auf 'rtl' gesetzt ist, verläuft die Inline-Richtung von rechts nach links. Das Ergebnis ist, dass der Anfang des Behälters von links nach rechts und der Ende des Behälters von rechts nach links verschoben wird:

#container {
  justify-items: start;
  direction: rtl;
}

Versuchen Sie es selbst

CSS-Syntax

justify-items: legacy|normal|stretch|positionelle Ausrichtung|overflow-alignment|Baseline-Ausrichtung|initial|inherit;

Eigenschaftswert

Wert Beschreibung
legacy

Standardwert.

Nur wenn der Wert von justify-self mit 'auto' beginnt, wird der Wert der Eigenschaft justify-items des Rasterbehälters bei den Rasterelementen geerbt, wenn der Wert mit 'legacy' beginnt.

Sein Bestehen dient dazu, das veraltete Ausrichtungsverhalten der HTML-Elemente <center> und der Eigenschaft align zu implementieren.
normal Abhängig vom Layout-Kontext, aber ähnlich wie 'stretch' im Rasterlayout.
stretch Wenn inline-size (Breite) nicht gesetzt ist, wird gestreckt, um den Rasterzellen zu füllen.
start Richten Sie die Projekte am Anfang der Inline-Richtung aus.
left Richten Sie die Projekte links aus.
center Richten Sie die Projekte in die Mitte aus.
end Richten Sie die Projekte am Ende der Inline-Richtung aus.
right Richten Sie die Projekte nach rechts aus.
overflow-alignment
  • 'safe' setzt die Ausrichtung der Projekte auf 'start', wenn der Inhalt überfließt.
  • 'unsafe' behält die Ausrichtungsvalue bei, egal ob der Inhalt überfließt oder nicht.
baseline-alignment Die Elemente werden basierend auf der Baseline mit dem übergeordneten Element ausgerichtet.
initial Diese Eigenschaft wird auf ihren Standardwert gesetzt. Siehe: initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe: inherit.

Technische Details

Standardwert: legacy
Vererbung: Nein
Animationserstellung: Nicht unterstützt. Bitte lesen Sie:Animationsspezifische Eigenschaften.
Version: CSS3
JavaScript-Syntax: object.style.justifyItems="center"

Browser-Unterstützung

Die Zahlen in der Tabelle geben die Versionsnummer des ersten Browsers an, der diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
57.0 16.0 45.0 10.1 44.0