CSS place-content Property
Example
Specify the flex lines to align towards the bottom of the flex container, and align the flex items with the same space between them horizontally:
#container {
display: flex;
place-content: end space-between;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The place-content property is used in flexbox and grid layouts, and is a shorthand property for the following properties:
If the place-content property has two values:
- place-content: start center;
- align-content property value is 'start'
- justify-content property value is 'center'
If the place-content property has one value:
- place-content: end;
- align-content and justify-content property values are both 'end'
| Default value: | normal |
|---|---|
| Inherited: | no |
| Animatable: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.placeContent="end space-around" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| place-content | 59.0 | 79.0 | 53.0 | 11.0 | 46.0 |
CSS Syntax
place-content: normal|value|initial|inherit;
Property Values
| Value | Description | Demo |
|---|---|---|
| normal | Default value. Dependant on layout context. The same as setting no property value for align-content and justify-content. | Demo ❯ |
| stretch | Grid: Stretches grid items to fill the grid container if size is not set. Flexbox: Stretches flex items on the cross axis to fill the flex container if flex items have no specified size on the cross axis. |
Demo ❯ |
| start | Align items at the start of the container | Demo ❯ |
| end | Align items at the end of the container | Demo ❯ |
| center | Align items to the center of the container | Demo ❯ |
| space-between | Distribute available extra space evenly between the elements inside the container on both axis. | Demo ❯ |
| space-around | Distribute available extra space evenly around each element inside the container on both axis. | Demo ❯ |
| space-evenly | Distribute elements inside the container evenly on both axis. | Demo ❯ |
| overflow-alignment |
|
|
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example with grid
Available extra space in the block direction is distributed evenly around each grid item, and the grid items are aligned to the center in the inline direction:
#container {
display: grid;
place-content: space-around center;
}
Try it Yourself »
Related Pages
CSS tutorial: CSS flexbox
CSS tutorial: CSS grid
CSS Reference: align-content property
CSS Reference: justify-content property
HTML DOM reference: alignContent property
