CSS/Eigenschaften/place-self

Browserunterstützung
caniuse.com

Die Eigenschaft place-self ist eine shorthand-Eigenschaft, die ein einzelnes Element in einem relevanten Layoutsystem wie Grid oder Flexbox gleichzeitig in Block- und Inline-Richtung ausrichtet (d. h. mit den Eigenschaften align-self und justify-self). Hierbei geht es um die Ausrichtung innerhalb der jeweiligen Layoutzeile oder -spalte. Die Layoutzeilen oder -spalten selbst werden mittels place-content, justify-content und align-content ausgerichtet. Einen Defaultwert für die Ausrichtung aller Elemente setzen Sie mit place-items, align-items und justify-items. Die *-self Eigenschaften gelten nur für ein Element und überschreiben den durch *-items gesetzten Wert.

place-self akzeptiert ein oder zwei Schlüsselwortparameter. Der erste Wert bezieht sich auf die Block- oder Querachse (align-self), der zweite Wert auf die Inlineachse (justify-self). Da das Flexbox-Layout die justify-self Eigenschaft nicht kennt, wird der zweite Wert für Flexboxen ignoriert.

Erlaubte Werte

• start (flex-start): alle Elemente werden am Anfang der Achse angeordnet, am Ende bleibt ggf. ein Abstand
• end (flex-end): alle Elemente werden beginnend vom Ende der Achse angeordnet, am Anfang bleibt ggf. ein Abstand
• center: alle Elemente werden in der Mitte der Achse angeordnet, am Anfang und am Ende bleibt ggf. derselbe Abstand
• left: richtet Elemente am logischen linken Rand der Achse aus
• right: richtet Elemente am logischen rechten Rand der Achse aus
• space-around: wie center mit gleichgroßen Abständen zwischen ihnen, das erste und letzte Element haben jeweils den halben Abstand zum Elternelement
• space-between: wie center mit gleichgroßen Abständen zwischen ihnen, das erste und letzte Element stoßen an die rechte und linke Seite des Elternelements
• space-evenly: wie center mit gleichgroßen Abständen zwischen ihnen, das erste und letzte Element haben jeweils auch diesen Abstand zum Elternelement
• normal: Die Elemente werden so verteilt, als wäre justify-content nicht gesetzt
• stretch (nur für grid): Die Elemente werden (ggf. unproportional) so angepasst, dass sie den Container komplett ausfüllen.
• zusätzlich safe oder unsafe, was steuert, ob ein „Überlaufen“ des Elterncontainers (was unsichtbare Inhalte bedeuten könnte) verhindert werden soll oder nicht.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

normal

anwendbar auf

flexible Container, Rasterelemente (Grid Layout)

Vererbung

nein

animierbar

nein

Beispiel

.grid { 
  display: grid;
  place-items: stretch start;
}
.grid .icon {
  margin: 0;
  min-height: 100vh;
  place-self: center;
}

Die Items in einem Grid werden standardmäßig in der Blockachse (align) gestreckt und in der Inlineachse zur Startseite hin ausgerichtet. Das Element mit der Klasse .icon überschreibt das und wird in beiden Richtungen zentriert.

Beachten Sie: Ist der zweite Wert nicht vorhanden, wird der erste Wert für beide verwendet, vorausgesetzt, er ist für beide ein gültiger Wert. Ist er für den einen oder den anderen ungültig, ist der gesamte Wert ungültig.

Siehe auch

• CSS/Tutorials/Flexbox/Ausrichtung
• CSS/Tutorials/Grid/Ausrichtung von Grid-Items#Ausrichtung des Gestaltungsrasters

Weblinks

• Spezifikation (WHATWG): CSS Flexible Box Layout Module Level 3 - place-content-property
• MDN: place-content
• Details: caniuse.com