place-self

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

* Some parts of this feature may have varying levels of support.

Die place-self CSS Kurzschrift-Eigenschaft ermöglicht es, ein einzelnes Element gleichzeitig sowohl in der Block- als auch in der Inline-Ausrichtung auszurichten (d. h. die Eigenschaften align-self und justify-self). Diese Eigenschaft gilt für Block-Level-Boxen, absolut positionierte Boxen und Grid-Elemente. Wenn der zweite Wert nicht vorhanden ist, wird der erste Wert auch für diesen verwendet.

Probieren Sie es aus

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Kurzschrift für die folgenden CSS-Eigenschaften:

Syntax

css
/* Positional alignment */
place-self: auto center;
place-self: normal start;
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: anchor-center;

/* 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: revert;
place-self: revert-layer;
place-self: unset;

Werte

auto

Wird auf den Wert von align-items des übergeordneten Elements berechnet.

normal

Die Wirkung dieses Schlüsselworts hängt vom verwendeten Layout-Modus ab:

  • In absolut positionierten Layouts verhält sich das Schlüsselwort wie start bei ersetzten Absolut-Positionierten-Boxen und wie stretch bei allen anderen Absolut-Positionierten-Boxen.
  • In der statischen Position von absolut positionierten Layouts verhält sich das Schlüsselwort wie stretch.
  • Bei Flex-Elementen verhält sich das Schlüsselwort wie stretch.
  • Bei Grid-Elementen führt dieses Schlüsselwort zu einem Verhalten, das ähnlich dem von stretch ist, außer bei Boxen mit einem Seitenverhältnis oder einer intrinsischen Größe, bei denen es wie start agiert.
  • Die Eigenschaft gilt nicht für Block-Level-Boxen und Tabellenzellen.
self-start

Richtet die Elemente so aus, dass sie bündig mit dem Rand des Ausrichtungscontainers abschließen, der der Startseite des Elements in der Querachse entspricht.

self-end

Richtet die Elemente so aus, dass sie bündig mit dem Rand des Ausrichtungscontainers abschließen, der der Endseite des Elements in der Querachse entspricht.

flex-start

Der Quer-Start-Rand des Flex-Elements ist bündig mit dem Quer-Start-Rand der Linie.

flex-end

Der Quer-End-Rand des Flex-Elements ist bündig mit dem Quer-End-Rand der Linie.

center

Die Randbox des Flex-Elements wird innerhalb der Linie auf der Querachse zentriert. Wenn die Quergröße des Elements größer als der Flexcontainer ist, wird es gleichmäßig in beide Richtungen überlaufen.

baseline, first baseline, last baseline

Gibt die Teilnahme an der Ausrichtung auf der ersten oder letzten Baseline an: Richtet die Ausrichtungsbaseline des ersten oder letzten Baseline-Sets der Box mit der entsprechenden Baseline im gemeinsamen ersten oder letzten Baseline-Set aller Boxen in ihrer Baseline-Sharing-Gruppe aus. Die Rückfallausrichtung für first baseline ist start, für last baseline ist es end.

stretch

Wenn die kombinierte Größe der Elemente entlang der Querachse kleiner ist als die Größe des Ausrichtungscontainers und das Element auf auto eingestellt ist, wird seine Größe gleichmäßig (nicht proportional) vergrößert, wobei weiterhin die durch max-height/max-width (oder gleichwertige Funktionen) auferlegten Einschränkungen eingehalten werden, sodass die kombinierte Größe aller auto-Elemente den Ausrichtungscontainer entlang der Querachse genau ausfüllt.

anchor-center

Bei anchor-positioned-Elementen richtet dieses die Elemente in der Block- und Inline-Ausrichtung in der Mitte des zugehörigen Ankerelements aus. Siehe Zentrieren auf dem Anker mit anchor-center.

Formale Definition

Anfangswertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufblock-level boxes, absolutely-positioned boxes, and grid items
VererbtNein
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
  • align-self: auto berechnet sich zu sich selbst bei absolut positionierten Elementen und zum berechneten Wert von align-items des Elternelements (abzüglich veralteter Schlüsselwörter) bei allen anderen Boxen oder start, falls die Box kein Elternelement hat. Sein Verhalten hängt vom Layoutmodell ab, wie für justify-self beschrieben. Ansonsten der angegebene Wert.
  • justify-self: wie angegeben
Animationstypdiskret

Formale Syntax

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

<align-self> =
auto |
normal |
stretch |
<baseline-position> |
<overflow-position>? <self-position> |
anchor-center

<justify-self> =
auto |
normal |
stretch |
<baseline-position> |
<overflow-position>? [ <self-position> | left | right ] |
anchor-center

<baseline-position> =
[ first | last ]? &&
baseline

<overflow-position> =
unsafe |
safe

<self-position> =
center |
start |
end |
self-start |
self-end |
flex-start |
flex-end

Beispiele

Grundlegende Demonstration

Im folgenden Beispiel haben wir ein einfaches 2 x 2 Grid-Layout. Zunächst hat der Grid-Container die Werte justify-items und align-items von stretch — den Standardwerten — wodurch die Grid-Elemente über die gesamte Breite ihrer Zellen gestreckt werden.

Die zweite, dritte und vierte Grid-Elemente erhalten dann unterschiedliche Werte von place-self, um zu zeigen, wie diese die standardmäßigen Platzierungen überschreiben. Diese Werte bewirken, dass die Grid-Elemente nur so breit/hoch wie ihr Inhaltsbreite/-höhe sind und sich in verschiedenen Positionen über ihre Zellen hinweg ausrichten, sowohl in Block- als auch Inline-Ausrichtung.

HTML

html
<article class="container">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
  <span>Fourth</span>
</article>

CSS

css
html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
}

article {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 80px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
}

span:nth-child(2) {
  place-self: start center;
}

span:nth-child(3) {
  place-self: center start;
}

span:nth-child(4) {
  place-self: end;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
  text-align: center;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

Ergebnis

Spezifikationen

Specification
CSS Box Alignment Module Level 3
# place-self-property

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
place-self
anchor-center
Experimental
Supported in Flex Layout
Supported in Grid Layout
Supported for absolutely-positioned boxes

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

Siehe auch