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

Browser Support

Desktop

X	79	59	45	46	9

Tablets / Mobile

59	59	45	43	9	7.0

Last updated by CSSPortal on: 5th November 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu