CSS justify-self Eigenschaft

Definition und Verwendung

Die Eigenschaft justify-self positioniert das Grid-Element innerhalb der Grid-Zelle entlang der INLINE-Direktion ausrichten.

Für englische Seiten ist die INLINE-Direktion von links nach rechts, die Block-Direktion nach unten.

Um diesem Attribut einen Ausrichtungeffekt zu verleihen, muss das Grid-Element im INLINE-Direktionsumfang um sich herum verfügbare Raum lassen.

Tipp:Um Grid-Elemente in der Block-Direktion anstatt in der INLINE-Direktion auszurichten, verwenden Sie Eigenschaft align-self oder Eigenschaft align-items Eigenschaften.

Weitere Informationen:

CSS-Tutorial:CSS Grid

CSS-Tutorial:CSS-Positionierung

CSS-Referenzhandbuch:Eigenschaft align-content

CSS-Referenzhandbuch:Eigenschaft align-items

CSS-Referenzhandbuch:Eigenschaft align-self

CSS-Referenzhandbuch:Eigenschaft direction

CSS-Referenzhandbuch:Eigenschaft grid

CSS-Referenzhandbuch:Eigenschaft grid-template-columns

CSS-Referenzhandbuch:Eigenschaft position

CSS-Referenzhandbuch:Eigenschaft writing-mode

Weitere Informationen:

Beispiel

Beispiel 1

Stellen Sie das Grid-Element auf der rechten Seite der Grid-Zelle ausrichten:

.red {
  display: grid;
  justify-self: right;
}

Versuchen Sie es selbst

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

Die Ausrichtung relativ zum Container auf 'zentriert' gesetzt, das Grid-Element selbst auf 'rechtsbündig' gesetzt. Der Wert 'right' hat Vorrang:

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

Versuchen Sie es selbst

Beispiel 3: justify-self auf einem absolut positionierten Grid-Projekt einstellen

Setzen Sie die Ausrichtung der absolut positionierten Grid-Elemente auf 'right':

#container {
  display: grid;
  position: relative;
}
.red {
  position: absolute;
  justify-self: right;
}

Versuchen Sie es selbst

Beispiel 4: writing-mode

Wenn der Wert der Eigenschaft writing-mode des Grid-Container-Elements auf vertical-rl gesetzt ist, ist die INLINE-Direktion nach unten. Das Ergebnis ist, dass der Anfang des Containers von links nach oben und der Ende des Containers von rechts nach unten verschiebt sich:

#container {
  display: grid;
  writing-mode: vertical-rl;
}
.blue {
  justify-self: end;
}

Versuchen Sie es selbst

Beispiel 5: direction

Wenn das direction-Attribut des Rasterbehälters auf 'rtl' gesetzt ist, ist die inline-Direktion von rechts nach links. Das Ergebnis ist, dass der Anfang des Behälters von links nach rechts und das Ende des Behälters von rechts nach links verschoben wird:

#container {
  display: grid;
  direction: rtl;
}
.blue {
  justify-self: end;
}

Versuchen Sie es selbst

CSS-Syntax

justify-self: auto|normal|stretch|positionelle Ausrichtung|overflow-alignment|Baseline-Ausrichtung|initial|inherit;

Attributewert

Wert Beschreibung
auto Standardwert. Vererbt den Wert der justify-self-Eigenschaft des Rasterbehälters.
normal

Abhängig vom Layout-Kontext, aber ähnlich wie das Verhalten von Grid-Items im Rasterlayout ohne size festgelegt.

Wenn size festgelegt ist, verhält sich der Wert des Attributes ähnlich wie 'start'.
stretch Wird inline-size (Breite) nicht festgelegt, wird es gestreckt, um den Rasterzellen zu füllen.
start Stellt das Projekt am Anfang der Zeilenrichtung ausgerichtet.
left Stellt das Projekt links ausgerichtet.
center Stellt das Projekt in die Mitte ausgerichtet.
end Stellt das Projekt am Ende der Zeilenrichtung ausgerichtet.
right Stellt das Projekt rechts ausgerichtet.
overflow-alignment
  • 'safe' setzt die Ausrichtung des Projekts auf 'start', wenn der Inhalt überfließt.
  • 'unsafe' behält den Ausrichtungswert bei, unabhängig davon, ob der Projektinhalt überfließt.
Baseline-Ausrichtung Das Element ist mit der Baseline des übergeordneten Elements 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: auto
Vererbung: Nein
Animationserstellung: Nicht unterstützt. Siehe:Animationsspezifische Attribute.
Version: CSS3
JavaScript-Syntax: object.style.justifySelf="right"

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die 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