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.

* Some parts of this feature may have varying levels of support.

Die CSS place-items Kurzschrift-Eigenschaft richtet Elemente gleichzeitig entlang der Block- und Inline-Ausrichtung aus. Sie setzt die Werte der Eigenschaften align-items und justify-items. Wenn der zweite Wert nicht festgelegt ist, wird der erste Wert ebenfalls dafür verwendet.

Probieren Sie es aus

Bestandteil-Eigenschaften

Diese Eigenschaft ist eine Kurzschrift 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 verwendet wird, um die Ausrichtung sowohl in der Block- als auch in der Inline-Richtung festzulegen.
  • 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

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

Formaler 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

Platzieren von Elementen in einem Flex-Container

In Flexbox gelten justify-self oder justify-items nicht, da Elemente entlang der Hauptachse als Gruppe behandelt werden. Daher 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

Platzieren von Elementen in einem Grid-Container

Im folgenden Grid-Container befinden sich Elemente, die kleiner sind als die zugewiesenen Grid-Bereiche. Daher verschiebt place-items sie in der Block- und Inline-Dimension.

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
place-items
anchor-center
Experimental
Supported in Flex Layout
Supported in Grid Layout

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.

Siehe auch