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
/* 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 wiestretch
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 wiestart
agiert. - Die Eigenschaft gilt nicht für Block-Level-Boxen und Tabellenzellen.
- In absolut positionierten Layouts verhält sich das Schlüsselwort wie
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
iststart
, fürlast baseline
ist esend
. 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 durchmax-height
/max-width
(oder gleichwertige Funktionen) auferlegten Einschränkungen eingehalten werden, sodass die kombinierte Größe allerauto
-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
Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | block-level boxes, absolutely-positioned boxes, and grid items |
Vererbt | Nein |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | diskret |
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
<article class="container">
<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
Specification |
---|
CSS Box Alignment Module Level 3 # place-self-property |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
place-self | ||||||||||||
anchor-center | ||||||||||||
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.