CSS place-content Property

Description

The place-content property determines how the browser distributes the space between and around flex elements along the transverse axis of the container (vertically) and along the main axis of the container (horizontally), or aligns the entire grid layout along the column axis and the row axis of the grid container (is shortened property for align-content properties and justify-content )

Initial value: normal
Applies to: Multi-line flex containers
Inherited: No
Media: Visual
Computed value: As specified
Animatable: No
CSS Version: CSS3
JavaScript syntax: object.style.placeContent

Syntax

place-content: <align-content> <justify-content> ?

Values

<align-content>See align-content CSS property for values.
<justify-content>See justify-content CSS property for values.

Example

HTML

<body> 

	place-content:

	<select id="alignContentControl">

	   <option value="stretch">stretch</option>

	   <option value="flex-start">flex-start</option>

	   <option value="flex-end">flex-end</option>

	   <option value="center">center</option>

	   <option value="space-between">space-between</option>

	   <option value="space-around">space-around</option>

	   <option value="space-evenly">space-evenly</option>

	</select>

	<select id="justifyContentControl">

	   <option value="flex-start">flex-start</option>

	   <option value="flex-end">flex-end</option>

	   <option value="center">center</option>

	   <option value="space-between">space-between</option>

	   <option value="space-around">space-around</option>

	   <option value="space-evenly">space-evenly</option>

	</select>

	<div id="flex-container"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div><div>G</div><div>H</div></div>

<script>

   const container = document.getElementById("flex-container");

   alignContentControl = document.getElementById("alignContentControl");

   justifyContentControl = document.getElementById("justifyContentControl");

   updateAlignment = function() { 

   container.style.placeContent = alignContentControl.value + " " + justifyContentControl.value; 

   }

   alignContentControl.addEventListener("change",  updateAlignment);

   justifyContentControl.addEventListener("change", updateAlignment);

</script>

      </body>

CSS

#flex-container {
    display: flex; 
    flex-wrap: wrap; 
    height: 300px;
    background: rgb(0,150,208); 
    margin: 10px; 
    text-align: center;
}
div > div {
    width: 20%; 
    background: rgb(241,101,41); 
    border: 1px solid; 
}

Result