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