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

Example

<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>
#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; 
} 

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
XX5945Yes9
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
595945Yes97.0