Dieplace-selfCSSKurzschreibweise ermöglicht es Ihnen, ein einzelnes Element sowohl in Block- als auch in Inline-Richtung gleichzeitig auszurichten (d.h. die Eigenschaftenalign-self undjustify-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 ihn verwendet.

Probieren Sie es aus

place-self: stretch center;

place-self: center start;

place-self: start end;

place-self: end center;

<section>  <div>    <div>One</div>    <div>Two</div>    <div>Three</div>  </div></section>

.example-container {  border: 1px solid #c5c5c5;  display: grid;  width: 220px;  grid-template-columns: 1fr 1fr;  grid-auto-rows: 80px;  grid-gap: 10px;}.example-container > div {  background-color: rgb(0 0 255 / 0.2);  border: 3px solid blue;}

Bestandteil-Eigenschaften

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

• align-self
• justify-self

Syntax

/* 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

Bewertet den übergeordneten Wert vonalign-items.

normal

Der Effekt dieses Schlüsselwortes hängt vom Layoutmodus ab, in dem wir uns befinden:

• In absolut positionierten Layouts verhält sich das Schlüsselwort wiestart beiersetzten absolut positionierten Boxen und wiestretch beiallen anderen absolut positionierten Boxen.
• In der statischen Position von absolut positionierten Layouts verhält sich das Schlüsselwort wiestretch.
• Für Flex-Elemente verhält sich das Schlüsselwort wiestretch.
• Für Grid-Elemente führt dieses Schlüsselwort zu einem Verhalten, das dem vonstretch ähnelt, außer bei Boxen mit einemSeitenverhältnis oder einer intrinsischen Größe, wo es wiestart wirkt.
• Die Eigenschaft gilt nicht für Block-Level-Boxen und Tabellzellen.

self-start

Richtet die Elemente so aus, dass sie bündig mit dem Rand des Ausrichtungscontainers an der Startseite des Elements in der Kreuzachse sind.

self-end

Richtet die Elemente so aus, dass sie bündig mit dem Rand des Ausrichtungscontainers an der Endseite des Elements in der Kreuzachse sind.

flex-start

Der cross-start Ränderand des Flex-Elements ist bündig mit dem cross-start Rand der Linie.

flex-end

Der cross-end Ränderand des Flex-Elements ist bündig mit dem cross-end Rand der Linie.

center

Die Margin-Box des Flex-Elements ist innerhalb der Linie auf der Kreuzachse zentriert. Wenn die Kreuzgröße des Elements größer als der Flex-Container ist, wird es in beide Richtungen gleichmäßig überlaufen.

baseline,first baseline,last baseline

Gibt die Teilnahme an der ersten oder letzten Basislinienausrichtung an: richtet die Ausrichtungsbasislinie des ersten oder letzten Basisliniensatzes der Box mit der entsprechenden Basislinie im gemeinsamen ersten oder letzten Basisliniensatz aller Boxen in seiner Basislinien-Sharing-Gruppe aus.Die Rückfallausrichtung fürfirst baseline iststart, die fürlast baseline istend.

stretch

Wenn die kombinierte Größe der Elemente entlang der Kreuzachse kleiner als die Größe des Ausrichtungscontainers ist und das Elementauto-größenangepasst ist, wird seine Größe gleichmäßig (nicht proportional) erhöht, wobei die durchmax-height/max-width (oder gleichwertige Funktionalität) auferlegten Einschränkungen respektiert werden, so dass die kombinierte Größe allerauto-größenangepassten Elemente den Ausrichtungscontainer entlang der Kreuzachse genau ausfüllt.

anchor-center

Im Falle vonankerpositionierten Elementen richtet das Element in der Block- und Inline-Richtung in der Mitte des zugehörigen Ankerelements aus. SieheZentrieren auf dem Anker mitanchor-center.

Formale Definition

Formale Syntax

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

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

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

<overflow-position> =
unsafe|
safe

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

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

Beispiele

Grundlegende Demonstration

Im folgenden Beispiel haben wir ein 2 x 2 Grid-Layout. Zunächst hat der Grid-Container die Wertejustify-items undalign-itemsstretch — die Standardeinstellungen — was bewirkt, dass sich die Grid-Elemente über die gesamte Breite ihrer Zellen erstrecken.

Den zweiten, dritten und vierten Grid-Elementen werden dann unterschiedliche Werte vonplace-self zugewiesen, um zu zeigen, wie diese die Standardplatzierungen überschreiben. Diese Werte bewirken, dass die Grid-Elemente nur so breit/hoch wie ihre Inhaltshöhe/-breite spannen und in unterschiedlichen Positionen über ihre Zellen hinweg ausgerichtet sind, in Block- und Inline-Richtung.

HTML

<article>  <span>First</span>  <span>Second</span>  <span>Third</span>  <span>Fourth</span></article>

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

Browser-Kompatibilität

Siehe auch

• align-self
• justify-self
• Grundkonzepte von Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Box-Ausrichtung im Grid-Layout
• CSS Box-Ausrichtung Modul