Benutzer:Rolf b/justify-items-temp

Browserunterstützung
caniuse.com

Die Eigenschaft justify-items legt den Standardwert für die justify-self-Eigenschaft derjenigen Elemente fest, die vom Formatierungskontext dieses Elements betroffen sind. Das Element, das den Rahmen für die Ausrichtung vorgibt, ist der Ausrichtungscontainer. Durch justify-self wird die Ausrichtung eines Elements entlang der Inlineachse des Ausrichtungscontainers festgelegt.

justify-items auf einem Grid

Der Standardwert gilt für die Grid-Items und richtet den Inhalt der Grid-Items aus, nicht die Grid-Items selbst (das würde man mit justify-content tun).

justify-items auf einer Flexbox oder eine HTML-Tabelle

Irrelevant, weil justify-self für Flex-Items und Tabellenzellen irrelevant ist

justify-items auf einem Bezugselement für absolute Positionierung

Die justify-self Eigenschaft der absolut positionierten Nachfahrenelemente ist betroffen

justify-items auf allen anderen Elementen

Diejenigen Kindelemente, die Blockformatierung verwenden, sind betroffen.

Für die einzelnen Kindelemente kann dieser Standardwert durch Angabe von justify-self überschrieben werden.

Erlaubte Werte

• auto: Verhält sich wie normal.

Alle weiteren Werte finden Sie bei justify-self.

• legacy Bewirkt, dass der Wert von justify-items an Nachfahrenelemente vererbt wird.
  Wird möglicherweise aus dem Standard entfernt

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

legacy

anwendbar auf

Block-Container und (Grid-Container)

Vererbung

nein

animierbar

nein

Beispiel

.vorne  {
  justify-items: 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 Grid Layout Module Level 2 - inline axis alignment
• Spezifikation (W3C): CSS Box Alignment Module Level 3 - justify items
• MDN: justify-items
• Details: caniuse.com