CSS/Eigenschaften/justify-self

Browserunterstützung
caniuse.com

Die Eigenschaft justify-self legt die Ausrichtung eines Grid Items entlang der Achse der Ausrichtung innerhalb des Grid Containers fest.

Erlaubte Werte

• auto
• normal
• start: Alle Elemente werden verteilt, zwischen ihnen ist gleichmäßiger Abstand, das erste und letzte Element stoßen an die rechte und linke Seite des Elternelements
• end: Alle Elemente werden verteilt, der mögliche Abstand ist sowohl zwischen den Elementen als auch zum Eltern-Container
• flex-start:
• flex-end:
• self-start:
• self-end:
• center: Alle Elemente werden mittig angeordnet, ein möglicher Rand ist links und rechts
• left
• right
• baseline
• stretch: Größen werden gleichermaßen (nicht proportional) angepasst
• safe
• unsafe

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

auto

anwendbar auf

flexible Container / Grid Items

Vererbung

nein

animierbar

nein

Beispiel

.vorne  {
  justify-self: start;
}
.mittig {
  justify-self: center;
}

 

Siehe auch

• CSS/Tutorials/Flexbox/Ausrichtung
• CSS/Tutorials/Grid/Ausrichtung von Grid-Items#justify-self

Weblinks

• Spezifikation (W3C): CSS Flexible Box Layout Module Level 1 - justify-self
• MDN: justify-self
• Details: caniuse.com