My flex box setup is pretty straightforward:
main {
width: 660px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
When I look at my page, it appears like this:
https://i.sstatic.net/JF8KC.jpg
The BZ image is styled like this:
#bzImage {
color: #fff;
border: white 1px solid;
background-image: url("../img/wreath.png");
background-size: contain;
background-repeat: no-repeat;
transform-origin: top;
text-align: center;
font-size: 160px;
width: 700px;
height: 650px;
display: flex;
justify-content: center;
align-items: center;
}
I've implemented an animation using anime.js to scale down the BZ image. However, this results in empty space below the image, which I would like the other elements in the flexbox to move up and fill:
https://i.sstatic.net/wn4XI.jpg
Is there a way to instruct flexbox to rearrange its children or utilize the extra space left when an element is scaled down?