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.

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>

---