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 Kurzform-Eigenschaft richtet Elemente gleichzeitig entlang der Block- und Inline-Richtung aus. Sie setzt die Werte der align-items- und justify-items-Eigenschaften. Wenn der zweite Wert nicht gesetzt ist, wird der erste Wert auch für diesen verwendet.

Probieren Sie es aus

place-items: center stretch;
place-items: center start;
place-items: start end;
place-items: end center;
<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </div>
</section>
#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 80px;
  grid-gap: 10px;
  width: 220px;
}

#example-element > div {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
}

Zusammengesetzte Eigenschaften

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 zur Ausrichtung sowohl in der Block- als auch in der Inline-Richtung verwendet wird.
  • Ein align-items-Wert, der die Ausrichtung in der Block-Richtung setzt, 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

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 auf der Hauptachse die Elemente 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

Platzierung von Elementen in einem Grid-Container

Der folgende Grid-Container hat Elemente, die kleiner sind als die Gitterbereiche, 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

Siehe auch