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
/* 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 einemjustify-items
-Wert, der die Ausrichtung in der Inline-Richtung festlegt.
Formale Definition
Initialer Wert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Nein |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | diskret |
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
#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
#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