place-items

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.

Die CSS place-items Kurzschreibweise richtet Elemente gleichzeitig sowohl in der Block- als auch in der Inline-Richtung aus. Sie setzt die Werte der Eigenschaften align-items und justify-items. Wenn der zweite Wert nicht gesetzt ist, wird der erste Wert auch für diesen verwendet.

Probieren Sie es aus

Bestandteileigenschaften

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

Syntax

css
/* Positional alignment */
place-items: center;
place-items: normal start;
place-items: center normal;
place-items: start legacy;
place-items: end normal;
place-items: self-start legacy;
place-items: self-end normal;
place-items: flex-start legacy;
place-items: flex-end normal;
place-items: anchor-center;

/* Baseline alignment */
place-items: baseline normal;
place-items: first baseline legacy;
place-items: last baseline normal;
place-items: stretch legacy;

/* Global values */
place-items: inherit;
place-items: initial;
place-items: revert;
place-items: revert-layer;
place-items: unset;

Werte

Eine der folgenden Formen:

  • Ein einzelner align-items-Wert, der für die Ausrichtung sowohl in der Block- als auch in der Inline-Richtung verwendet wird.
  • Ein align-items-Wert, der die Ausrichtung in der Block-Richtung festlegt, gefolgt von einem justify-items-Wert, der die Ausrichtung in der Inline-Richtung festlegt.

Formale Definition

Initialer Wertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypdiskret

Formale Syntax

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

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

<justify-items> =
normal |
stretch |
<baseline-position> |
<overflow-position>? [ <self-position> | left | right ] |
legacy |
legacy && [ left | right | center ] |
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

Platzierung von Elementen in einem Flex-Container

In Flexbox gelten justify-self oder justify-items nicht, da die Elemente auf der Hauptachse als Gruppe behandelt werden. Deshalb wird der zweite Wert ignoriert.

CSS

css
#container {
  height: 200px;
  width: 240px;
  place-items: stretch; /* You can change this value by selecting another option in the list */
  background-color: #8c8c8c;
  display: flex;
}

Ergebnis

Platzierung von Elementen in einem Grid-Container

Der folgende Grid-Container enthält Elemente, die kleiner sind als die Grid-Bereiche, in denen sie platziert sind. Daher wird place-items sie in den Block- und Inline-Dimensionen verschieben.

CSS

css
#grid-container {
  height: 200px;
  width: 240px;
  place-items: stretch; /* You can change this value by selecting another option in the list */
  background-color: #8c8c8c;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#grid-container > div {
  width: 50px;
}

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch