CSS place-content Property

❮ Previous Complete CSS Reference Next ❯

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:

align-content
justify-content

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'

Show demo ❯

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	'safe' sets alignment of the item to 'start' if the content overflows 'unsafe' keeps the alignment value regardless of wether or not the item content overflows
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 »

CSS tutorial: CSS flexbox

CSS tutorial: CSS grid

CSS Reference: align-content property

CSS Reference: justify-content property

HTML DOM reference: alignContent property