CSS/Eigenschaften/justify-items

Browserunterstützung
caniuse.com

Die Eigenschaft justify-items legt die horizontale Ausrichtung aller Kindelemente des Rasters fest. Der Wert wird an die justify-self-Eigenschaft der einzelnen Rasterelemente übergeben.

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
• legacy

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

legacy

anwendbar auf

flexible Container, Rasterelemente (Grid Layout)

Vererbung

nein

animierbar

nein

Beispiel

.vorne  {
  justify-items: flex-start;
}
 
.mittig {
  justify-items: center;
}
 
.verteilt1 {
  justify-items: stretch;
}

 

Siehe auch

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

Weblinks

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