CSS place-content Property

The CSS place-content property is the shorthand of align-content and justify-content property. The shorthand properties in CSS means that you can set the multiple properties values in a single property. Here the place-content property can hold the value of the align-content and justify-content property values.   

Syntax:

place-content: align-content-property-value justify-content-property-value

Property Values: This property accepts all the possible combination values that can make by the align-content and justify-content property values.

• start: This property is used to align flex items from the start of the container.
• end: This property is used to align flex items from the end of the container.
• flex-start: This property displays the lines at the start of the flex container.
• flex-end: This property displays the flex lines at the end of the flex container.
• center: This property aligns flex items at the center of the container.
• space-around: This property distribute space equally around the flex lines.
• space-between: This property distribute flex lines space with equal space between them.
• space-evenly: This property defines the position with equal spacing between them but the spacing from corners differs.
• stretch: This property defines the line stretched to take the remaining space of the flex container. It is the default value.

Below examples illustrate the CSS place-content property:

Example 1: In this example, we will use the following place-content property values: flex-start center.

Output: 

👁 Image

Example 2: Here we will use place-content: flex-start start property value.

Output:

👁 Image

Example 3: Here we will use the place-content: flex-end end property value.

Output:

👁 Image

Supported Browsers:

• Google Chrome 59
• Edge 79
• Firefox 45
• Opera 46
• Safari 9