CSS place-items Property
Example
#demo {
width: 300px;
height: 300px;
border: 1px solid black;
display: flex;
place-items: center;
}Meaning:
The place-items CSS property align items along both the block and inline directions at once (i.e. the align-items and justify-items properties) in a relevant layout system such as Grid or Flexbox. If the second value is not set, the first value is also used for it.
The place-items property is a shorthand for the following CSS properties:
| Default value: | normal legacy |
| Inherited: | No |
| Animatable: | No |
| Version: | CSS3 |
| JavaScript syntax: | |
Standard Syntax
place-items: normal | stretch | baseline-position | [ overflow-position ? self-position] |initial|inherit|revert|revert-layer|unset;Browser Support
Status
Property Values
The following table describes the values of this property:
| Value | Description |
|---|---|
| auto | Behaves as normal if the box has no parent, or when determining the actual position of an absolutely positioned box. It behaves as the computed align-items value of the parent box (minus any legacy keywords) otherwise (including when determining the static position of an absolutely positioned box). |
| normal | Represents the “default” alignment for the layout mode. Its behavior depends on the layout mode, as described below. |
| stretch | This is default value. Items are stretched to fit the flex container. The free-space is divided equally between all the items. |
| baseline | Items are positioned at the baseline of the flex container.
Possible Values:
|
| center | Items are positioned at the center of the flex container. |
| flex-end | Items are positioned at the end of the flex container. |
| flex-start | Items are positioned at the beginning of the flex container. |
| start | The items are packed flush to each other toward the start edge of the alignment container in the appropriate axis. |
| end | The items are packed flush to each other toward the end edge of the alignment container in the appropriate axis. |
| self-start | The items are packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis. |
| self-end | The items are packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis. |
| safe | Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start. |
| unsafe | Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored. |
| initial | Sets this property to its default value. |
| inherit | If specified, the associated element takes the computed value of its parent element animation-delay property. |
| revert | Reverts the cascaded value of the property from its current value to the value the property |
| revert-layer | Rollback styles to the ones specified in previous cascade layers. |
| unset | Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. |
Default CSS Property Values
selectors {
place-items: normal legacy;
}