In this image you can see that in my layout when i hover over a box ,the text in the box gets centered vertically and that happens when i add "align-content : center;" under the .box:hover selector ,and .box is a class associated to all the flex item in my flex container.But as i know "align-content" cannot be used in flex items.Then why in my case "align-content" can be used for flex-items and why is it able to align the content .
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>CSS Flexbox</title><style> .container { border: 2px solid grey; display: flex; height: 500px; width: 500px; flex-direction: row; justify-content: center; align-content: center; } .box { height: 100px; width: 100px; border: 2px solid black; margin: 15px; } .box:hover { align-content: center; } #box1 { background-color: red; } #box2 { background-color: blue; } #box3 { background-color: orange; } #box4 { background-color: aqua; } #box5 { background-color: purple; }</style></head><body><div class="container"><div id="box1" class="box">BOX1</div><div id="box3" class="box">BOX2</div><div id="box2" class="box">BOX3</div><div id="box4" class="box">BOX4</div><div id="box5" class="box">BOX5</div></div></body></html>