The align-content property modifies the behavior of the flex-wrap property by aligning multiple flex lines along the vertical axis.

The following is a div within a div and we want the three inner divs to line up one on top of the other in the vertical center of the box div.

<div id="box">
    <div></div>
    <div></div>
    <div></div>
</div>

#box {
    width: 80px;
    height: 300px;
    border: #bababa solid thin;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}
#box div {
    width: 80px;
    height: 80px;
    border: red solid thin;
}

Default value	stretch
Inherited values	no
Can it be animated?	no

These are the allowed values.

Value	Description
stretch	Lines stretch to take up the remaining space (default)
center	Lines are packed toward the center of the flex container
flex-start	Lines are packed toward the start of the flex container
flex-end	Lines are packed toward the end of the flex container
space-between	Lines are evenly distributed in the flex container
space-around	Lines are evenly distributed in the flex container with half-size spaces on either end
space-evenly	Lines are evenly distributed in the flex container with equal space around them
initial	Sets this property to its default value
inherit	Inherits this property from its parent element

The HTML element can also be styled using JavaScript and the element’s id.

document.getElementById('box').style.alignContent = 'center';

<button onclick='my_function()'>Click Here</button>

<script>
function my_function() {
    document.getElementById('box').style.alignContent = 'center';
}
</script>

---