Place-content | CSS-Tricks

CSS Almanac → Eigenschaften → P → place-content

Marcel Rojas am 17. Mai 2021

Die `place-content`-Eigenschaft in CSS ist eine Kurzschreibweise für die Eigenschaften `align-content` und `justify-content`. Sie kombiniert diese in einer einzigen Deklaration in CSS Grid- und Flexbox-Layouts, bei denen `align-content` und `justify-content` Werte sind, die ein einzelnes Element in der Block- und Inline-Richtung ausrichten.

.element {
  display: flex;
  place-content: start space-evenly;
}

Anstatt also `align-content` und `justify-content` wie folgt zu schreiben:

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

...können wir `place-content` deklarieren, das beide dieser Werte annimmt

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

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

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

...ist dasselbe wie das Schreiben

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

Syntax

Dies ist lediglich eine schicke Art zu sagen, dass `place-content` zwei Werte annimmt: den ersten für den Wert der `align-content`-Eigenschaft und den zweiten für den Wert der `justify-content`-Eigenschaft.

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

Anfangswert: normal
Gilt für: Block-Container, Flex-Container und Grid-Container
Vererbt: nein
Berechneter Wert: wie angegeben
Animationstyp: diskret

Werte

Einige großartige Beispiele für Werte und Wertpaare, direkt von MDN übernommen

/* Positional alignment */
/* align-content does not take left and right values */
place-content: center start;
place-content: start center;
place-content: end left;
place-content: flex-start center;
place-content: flex-end center;

/* Baseline alignment */
/* justify-content does not take baseline values */
place-content: baseline center;
place-content: first baseline space-evenly;
place-content: last baseline right;

/* Distributed alignment */
place-content: space-between space-evenly;
place-content: space-around space-evenly;
place-content: space-evenly stretch;
place-content: stretch space-evenly;

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

Manchmal hilft ein Bild

`align-content`

`justify-content`

Positionsbezogene Ausrichtungswerte

Wenn wir von „positionsbezogener Ausrichtung“ sprechen, beziehen wir uns auf benannte Werte, die angeben, an welchem Rand des Containers Elemente ausgerichtet werden. Alle diese Werte gelten für `align-content` und `justify-content`, mit Ausnahme von `left` und `right`, die von `justify-content` nicht unterstützt werden.

self-start: Richtet die Elemente am Startrand des Containers aus.
self-end: Richtet die Elemente am Endrand des Containers aus.
flex-start: Wird in einem Flex-Layout verwendet, wo das Element am Startrand des Containers bündig ausgerichtet ist.
flex-end: Wird in einem Flex-Layout verwendet, wo das Element am Endrand des Containers bündig ausgerichtet ist.
center: Zentriert die Elemente innerhalb ihres Containers.
left: Bündigt die Elemente am linken Rand des Containers aus.
right: Bündigt die Elemente am rechten Rand des Containers aus.

Grundlinienausrichtungswerte

Eine Grundlinienausrichtung richtet alle Elemente innerhalb einer Gruppe (z. B. Zellen in einer Zeile) aus, indem ihre Grundlinien übereinstimmen, sodass ihre oberen oder unteren Ränder bündig sind.

baseline: Richtet die Elemente innerhalb einer Gruppe aus, indem ihre Ausrichtungsgrundlinien mit den Grundlinien der Gruppe übereinstimmen. Standardmäßig `first`, wenn `baseline` allein verwendet wird.
first baseline: Richtet die Ausrichtungsgrundlinie des ersten Grundlinien-Sets der Box mit der entsprechenden Grundlinie im gemeinsamen ersten Grundlinien-Set aller Boxen in ihrer Grundlinien-gemeinsamen Gruppe aus. Fallback-Ausrichtung ist `start`.
last baseline: Richtet die Ausrichtungsgrundlinie des letzten Grundlinien-Sets der Box mit der entsprechenden Grundlinie im gemeinsamen letzten Grundlinien-Set aller Boxen in ihrer Grundlinien-gemeinsamen Gruppe aus. Fallback-Ausrichtung ist `end`.

Verteilte Ausrichtungswerte

Wie sollen die Elemente im Container verteilt werden? Sollen sie sich auseinander bewegen? Sollen sie gestreckt werden, um den verfügbaren Platz auszufüllen? Das sind die Arten von Dingen, die die folgenden Werte definieren.

space-between: Die Elemente werden gleichmäßig im Ausrichtungscontainer verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente ist gleich.
space-around: Die Elemente werden gleichmäßig im Ausrichtungscontainer verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente ist gleich.
space-evenly: Die Elemente werden gleichmäßig im Ausrichtungscontainer verteilt. Der Abstand zwischen jedem Elementpaar ist genau gleich.
stretch: Wird verwendet, um ein Element auf beiden Achsen zu strecken, wobei die durch die Eigenschaften `max-height` und `max-width` (oder entsprechende Funktionalität) auferlegten Beschränkungen beachtet werden.

Beispiele

`place-content: space-around start;`

Um die Elemente herum gibt es Freiraum (`space-around`), und sie sind am Startrand (`start`) des Containers bündig.

`place-content: end center;`

Die Elemente sind im Block-Richtung am Endrand (`end`) des Containers bündig und werden dann im Inline-Richtung zentriert.

`place-content: space-between center;`

Hier stoßen wir die Elemente an entgegengesetzten Rändern des Containers (`space-between`) im Block-Richtung und zentrieren sie dann (`center`) im Inline-Richtung.

Demo

Spielen Sie mit den Steuerelementen in der folgenden Demo, um zu sehen, wie sich die Änderung der Werte von `place-content` auf die Ausrichtung der Elemente auswirkt.