How to prevent empty space in flexbox when scaling an element

user_3317592 0
Viewed 198

I have a simple flex box:

main {
  width: 660px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

this displays my page as such:

enter image description here

Where the BZ image is looking like so:

#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'm using anime.js to animate the BZ image to be smaller (scale it down). The problem is when I do this it leaves empty space below the image that I want the rest of the elements in the flexbox to automatically move up and fill:

enter image description here

How can I tell flexbox to re-layout its children or otherwise use up the empty space created when an element is scaled down?

flexbox css html
1 Answers

Flex box re-layout « automatically » so the most probable issue is that the size of the box you are scaling down still has the same size constraints. What I suppose (and not know for sure) is that animate.js wrap your html element in a box of the same size before the animation starts or something like that which means that the size of the element does not actually really decrease.

If all you are doing is scaling down your box you could try to use pure css / a bit of us too.

A fix that would combine both (animate and pure js) would be to change the relative position of the image in accordance with the animate.js scale down animation.

user_116007310
Related