CSS place-content property

Definition and Usage

place-content Properties are used for flexbox and grid layout and are abbreviations for the following properties:

place-content: start center;

place-content: end;

Then the values of the align-content and justify-content properties are both 'end'

Align the elasticity at the bottom of the elastic container and make the spacing between elastic items equal in the horizontal direction:

#container {
  display: flex;
  place-content: end space-between;
{}

The extra space in the block direction is evenly distributed around each grid item, and the grid items are centered in the inline direction:

#container {
  display: grid;
  place-content: space-around center;
{}

place-content: normal|value|initial|inherit;

Value	Description
normal	Default Value. Depends on the layout context. Is equivalent to not setting the values for align-content and justify-content.
stretch	Grid: If the size is not set, the grid items will stretch to fill the grid container. Flexible Box: If the flexible items do not specify a size on the cross-axis, they will stretch to fill the flexible container on the cross-axis.
start	Align items to the start position of the container.
end	Align items to the end position of the container.
center	Align items to the center position of the container.
space-between	Distribute available space evenly along the two axes of the container, making the spacing between items equal.
space-around	Distribute available space evenly along the two axes of the container, making the spacing around each item equal.
space-evenly	Distribute items evenly along the two axes of the container.
overflow-alignment	'safe': If the content overflows, the item alignment is set to 'start'. 'unsafe': The alignment value is maintained regardless of whether the content overflows.
initial	Sets this property to its default value. See also initial.
inherit	This property is inherited from its parent element. See also inherit.

Default Value:	normal
Inheritance:	No
Animation Creation:	Not supported. See also:Animation-related Properties.
Version:	CSS3
JavaScript Syntax:	object.style.placeContent="end space-around"