The alignContent property is used to align items in a flexbox or grid. It is used to align items on the vertical axis when they do not use all the available space.
Syntax
Following is the syntax for −
Setting the alignContent property −
object.style.alignContent = "stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit"
Values
Following are the values −
| Value | Description |
|---|---|
| Stretch | It is the default value and used to stretch the items to fit the container. |
| Center | This is used for positioning the items at the center of the container. |
| flex-start | To position items at the beginning of the container. |
| flex-end | To position the items at the end of the container. |
| space-between | To position the items with space between the lines. |
| space-around | To position the items with space before, between and after the lines. |
| Initial | For setting this property to initial value. |
| Inherit | To inherit the parent property value. |
Example
Let us look at the example for the alignContent property −
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 180px;
height: 220px;
padding: 10px;
border: 1px solid #333;
display: flex;
flex-flow: row wrap;
align-content: space-around;
}
.ele {
width: 60px;
height: 60px;
background-color: skyblue;
}
.ele:nth-child(2n) {
background-color: orange;
}
</style>
<script>
function changeAlign(){
document.getElementById("container").style.alignContent="flex-start";
}
</script>
</head>
<body>
<div id="container">
<div class="ele"></div>
<div class="ele"></div>
<div class="ele"></div>
<div class="ele"></div>
<div class="ele"></div>
<div class="ele"></div>
</div>
<p>Change the align content property of the above div by clicking the belwo button</p>
<button onclick="changeAlign()">CHANGE</button>
</body>
</html>Output
This will produce the following output −
On clicking the CHANGE button −
