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
<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 | |||||
 |
 |
 |
 |
 |
 |
| X | X | 59 | 45 | Yes | 9 |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| 59 | 59 | 45 | Yes | 9 | 7.0 |
