Platz-selbst | CSS-Tricks

CSS Almanac → Properties → P → place-self

Marcel Rojas am 4. Mär. 2021

Die CSS-Eigenschaft place-self ist eine Kurzschreibweise für die Eigenschaften align-self und justify-self. Sie kombiniert diese in einer einzigen Deklaration für CSS Grid- und Flexbox-Layouts, wobei align-self und justify-self (nur CSS Grid) Werte sind, die ein einzelnes Element in Block- und Inline-Richtung ausrichten.

.element {
  place-self: center start;
}

Die Eigenschaft ist im CSS Box Alignment Module Level 3 Specification enthalten, wo sie als „self-alignment shorthand“ bezeichnet wird. Das ist ein großartiger Spitzname, da sie es einem Element tatsächlich ermöglicht, sich unabhängig von der Ausrichtung seines Elternelements und anderer Elemente in einer Gruppe auszurichten, indem sie zwei Eigenschaften in einer einzigen Deklaration kombiniert.

Syntax

place-self: <'align-self'> <'justify-self'>?

Anfangswert: auto
Gilt für: Block-Level-Boxen, absolut positionierte Boxen und Grid-Items.
Vererbt: nein
Berechneter Wert: Die Werte der einzelnen Eigenschaften des Shorthands: align-self und justify-self
Animationstyp: diskret

Werte

/* Keyword values */
place-self: auto center;
place-self: normal start;

/* Positional alignment */
place-self: center normal;
place-self: start auto;
place-self: end normal;
place-self: self-start auto;
place-self: self-end normal;
place-self: flex-start auto;
place-self: flex-end normal;
place-self: left auto;
place-self: right normal;

/* Baseline alignment */
place-self: baseline normal;
place-self: first baseline auto;
place-self: last baseline normal;
place-self: stretch auto;

/* Global values */
place-self: inherit;
place-self: initial;
place-self: unset;

Schlüsselwortwerte

auto: Gibt den Wert zurück, der von der justify-items-Eigenschaft im Elternelement bereitgestellt wird. Wenn das Element kein Elternelement hat, wird stattdessen normal zurückgegeben.
normal: Das Verhalten dieses Wertes hängt vom aktuellen Layoutmodus ab.
- In absolut positionierten Layouts verhält sich das Schlüsselwort wie start bei ersetzten absolut positionierten Boxen. Bei allen anderen absolut positionierten Boxen verhält es sich wie der Wert stretch.
- In einer statischen Position von absolut positionierten Layouts verhält sich das Schlüsselwort wie der Wert stretch.
- Für Flex-Items verhält sich das Schlüsselwort wie stretch.
- Für Grid-Items führt dieses Schlüsselwort zu einem Verhalten, das stretch ähnelt, außer bei Boxen mit einem Seitenverhältnis oder intrinsischen Größen – in diesen Fällen verhält es sich wie start.
- Die Eigenschaft gilt überhaupt nicht für Block-Level-Boxen oder Tabellenzellen.

Positionelle Ausrichtung

self-start: Richtet das Element an der Startkante des Containers aus.
self-end: Richtet das Element an der Endkante des Containers aus.
flex-start: Wird in einem Flex-Layout verwendet, wobei das Element an die Startkante des Containers angedockt wird.
flex-end: Wird in einem Flex-Layout verwendet, wobei das Element an die Endkante des Containers angedockt wird.
center: Zentriert das Element innerhalb seines Containers.
left: Dockt das Element an die linke Kante des Containers an.
right: Dockt das Element an die rechte Kante des Containers an.

Baseline-Ausrichtung

baseline: Richtet das Element innerhalb einer Gruppe (z. B. Zellen in einer Zeile) aus, indem seine Ausrichtungsbaseline mit den Baselines der Gruppe abgeglichen wird. Standard ist first, wenn baseline allein verwendet wird.
first baseline: Richtet die Ausrichtungsbaseline des ersten Baselinesets der Box mit der entsprechenden Baseline im gemeinsamen ersten Baselineset aller Boxen in ihrer Baseline-teilenden Gruppe aus. Die Fallback-Ausrichtung ist start.
last baseline: Richtet die Ausrichtungsbaseline des letzten Baselinesets der Box mit der entsprechenden Baseline im gemeinsamen letzten Baselineset aller Boxen in ihrer Baseline-teilenden Gruppe aus. Die Fallback-Ausrichtung ist end.
stretch: Wird verwendet, um ein Item auf beiden Achsen zu strecken, während die durch die Eigenschaften max-height und max-width (oder gleichwertige Funktionalität) auferlegten Einschränkungen beachtet werden.

Zwei Eigenschaften, eine Deklaration

Das ist, wofür Shorthand-Eigenschaften in CSS so gut sind. Anstatt align-self und justify-self so aufzuschreiben:

.item {
  display: grid;
  align-self: start;
  justify-self: center;
}

…können wir einfach place-self deklarieren, das beide dieser Werte übernimmt.

.item {
  display: grid;
  place-self: start center;
}

Wenn nur ein Wert angegeben wird, setzt dieser beide Eigenschaften. Zum Beispiel dieser

.item {
  display: grid;
  place-self: start;
}

Ist dasselbe, als würde man dies schreiben:

.item {
  display: grid;
  align-self: start;
  justify-self: start;
}

Es gibt kein `justify-self` in Flexbox

Flexbox ignoriert die Eigenschaft justify-self, da die Eigenschaft justify-content bereits steuert, wie dieser zusätzliche Platz genutzt wird. Mit anderen Worten, ein Flex-Container berechnet bereits, wie viel Platz für die Anordnung seiner Items benötigt wird. Jeder verbleibende Platz, nachdem die Items platziert wurden, wird von justify-content behandelt. Und da justify-self auf die einzelnen Items eines Flex-Containers wirkt, gibt es dafür wirklich keinen Bedarf – die Eigenschaft justify-content, die auf den Flex-Container wirkt, hat dies bereits abgedeckt.

Mit anderen Worten, justify-self ist ein No-Go, wenn wir es mit Flexbox zu tun haben. Ja, es ist ein wenig seltsam, aber auch eines dieser Dinge, die man einfach wissen muss, wenn man sich mit Flexbox beschäftigt.

Ob wir vom Block- oder Inline-Richtung sprechen, hängt ausschließlich von der direction, writing-mode und text-orientation des Elements ab. Wenn es von links nach rechts geht, wie im Deutschen, dann sprechen wir von der Block- (vertikalen) Richtung. Wenn es vertikal ist, dann haben wir es mit der Inline- (horizontalen) Richtung zu tun. Chris erklärt logische Eigenschaften ausführlicher und es lohnt sich, dies für weitere Informationen zu prüfen.

Beispiele

Unser Ziel befindet sich in einem Grid-Layout und platziert sich in der Block- (vertikalen) Richtung auf der Baseline und in der Inline- (horizontalen) Richtung in der Mitte.

In diesem Beispiel befindet sich unser Ziel in einem Grid-Layout und platziert sich in der Block- (vertikalen) Richtung am Ende (flex-end) und in der Inline- (horizontalen) Richtung am Anfang (flex-start) des Containers.

Nun lassen wir das Ziel sich in der Block- (vertikalen) Richtung am Anfang (flex-start) und in der Inline- (horizontalen) Richtung am Ende (flex-end) des Containers platzieren.