Die place-itemsEigenschaft in CSS ist eine Abkürzung für die Eigenschaften align-itemsund justify-itemsund kombiniert sie zu einer einzigen Deklaration.
Eine übliche Verwendung ist die horizontale und vertikale Zentrierung mit Raster:
.center-inside-of-me ( display: grid; place-items: center; )Diese Eigenschaften wurden mit der Einführung von Flexbox- und Grid-Layouts verwendet, gelten jedoch auch für:
- Boxen auf Blockebene
- Absolut positionierte Boxen
- Statische Position absolut positionierter Boxen
- Tabellenzellen
Syntax
Die Eigenschaft akzeptiert zwei Werte, den ersten für align-itemsund den zweiten für justify-items. align-itemsRichtet den Inhalt zur Auffrischung entlang der vertikalen (Spalten-) Achse aus, während er justify-itemsentlang der horizontalen (Zeilen-) Achse ausgerichtet wird.
.item ( display: grid; place-items: start center; )Dies ist dasselbe wie beim Schreiben:
.item ( display: grid; align-items: start; justify-items: center; )Wenn nur ein Wert angegeben wird, werden beide Eigenschaften festgelegt. Zum Beispiel:
.item ( display: grid; place-items: start; )… Ist dasselbe wie das Schreiben von:
.item ( display: grid; align-items: start; justify-items: start; )Akzeptierte Werte
Was diese Eigenschaft interessant macht, ist, dass sie sich je nach verwendetem Kontext unterschiedlich verhält. Einige Werte gelten beispielsweise nur für Flexbox und funktionieren in einer Rastereinstellung nicht. Darüber hinaus gelten einige Werte für die align-itemsEigenschaft, während andere für die justify-itemsSeite gelten.
Ferner kann man sich vorstellen, dass die Werte selbst in eine Reihe von Arten der Ausrichtung fallen: Kontext, Verteilung, Position (die sich selbst positionieren, wenn sie direkt auf ein untergeordnetes Element im Layout angewendet werden) und Grundlinie.
Rachel Andrew hat ein ausgezeichnetes Box Alignment-Spickzettel, das die Wirkung der Werte veranschaulicht.
| Wert | Art | Beschreibung |
|---|---|---|
auto | Kontextuell | Der Wert wird entsprechend dem Kontext des Elements entsprechend angepasst. Es verwendet den justify-itemsWert des übergeordneten Elements des Elements. Wenn kein übergeordnetes Element vorhanden ist oder es auf ein Element angewendet wird, mit dem positioniert wird absolute, wird der Wert normal. |
normal | Kontextuell | Übernimmt das Standardverhalten des Layoutkontexts, in dem es angewendet wird. • Blockebene Layouts: start• Absolutpositionierung: startfür ersetzte absolute Elemente und stretchfür alle anderen• Tabellenlayouts: Wert ignoriert • Flexbox Layouts: Wert wird ignoriert, • Gitter Layouts: stretch, es sei denn , ein Seitenverhältnis oder intrinsische Leimung verwendet wird , wo es sich verhält mögenstart |
stretch | Verteilung | Erweitert das Element vertikal für align-itemsund horizontal für beide Kanten des Containers justify-items. |
start | Positional | Alle Elemente sind am Startrand (links) des Containers gegeneinander ausgerichtet |
end | Positional | Alle Elemente sind am Endrand (rechts) des Containers gegeneinander ausgerichtet |
center | Positional | Die Elemente sind nebeneinander in Richtung der Mitte des Behälters ausgerichtet |
left | Positional | Die Elemente sind nebeneinander zur linken Seite des Containers ausgerichtet. Wenn die Eigenschaft nicht parallel zu einer Standardachse oben, rechts, unten, links ist, verhält sie sich wie folgt end. |
right | Positional | Die Elemente sind nebeneinander zur rechten Seite des Behälters ausgerichtet. Wenn die Eigenschaft nicht parallel zu einer Standardachse oben, rechts, unten, links ist, verhält sie sich wie folgt start. |
flex-start | Positional | Ein Nur-Flexbox-Wert (auf den zurückgegriffen wird start), bei dem Artikel in Richtung der Startkante des Containers verpackt werden. |
flex-end | Positional | Ein Nur-Flexbox-Wert (auf den zurückgegriffen wird end), bei dem Artikel in Richtung der Endkante des Containers gepackt werden. |
self-start | Selbstpositionierung | Ermöglicht es einem Element in einem Layout, sich basierend auf seiner eigenen Startseite an der Containerkante auszurichten. Überschreibt grundsätzlich den eingestellten Wert auf dem übergeordneten Wert. |
self-end | Selbstpositionierung | Ermöglicht einem Element in einem Layout, sich an der Containerkante basierend auf seiner eigenen Endseite auszurichten, anstatt den Positionswert des Containers zu erben. Überschreibt grundsätzlich den eingestellten Wert auf dem übergeordneten Wert. |
first baselinelast baseline | Basislinie | Richtet alle Elemente innerhalb einer Gruppe (dh Zellen innerhalb einer Zeile) aus, indem ihre Ausrichtungsbasislinien abgeglichen werden. Der Standardwert ist firstif , wenn baselinees alleine verwendet wird. |
Browser-Unterstützung
Diese Eigenschaft ist in der Spezifikation des CSS Box Alignment Model Level 3 enthalten.
Die Browserunterstützung ist ziemlich breit geworden und größtenteils nur noch verwendbar:
- Edge 79+ (Post-Chrom-Transition)
- Firefox 45+
- Chrome 59+
- Safari 11+
Verweise
- CSS Box Alignment Model Level 3 - Die offizielle Spezifikation, in der die
place-itemsEigenschaft ursprünglich definiert wurde. - Mozilla Developer Network - Die Dokumentation des Mozilla-Teams.
- Box Alignment Cheat Sheet - Rachel Andrews Gliederung ist eine sehr hilfreiche Ressource, um Ausrichtungsbegriffe und ihre Definitionen zu erfassen.