如何在缩放元素时防止flexbox中的空白
如何在缩放元素时防止flexbox中的空白
提问于 2021-05-18 00:41:00
我有一个简单的flex box：
main {
width: 660px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}这会将我的页面显示为：
其中，BZ图像如下所示：
#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;
}我使用anime.js来使BZ图像变得更小(缩小它)。问题是，当我这样做时，它会在图像下面留下空白空间，我希望flexbox中的其余元素自动向上移动并填充：
我如何告诉flexbox重新布局它的子元素，或者在元素缩小时耗尽空出的空间？
回答 1
Stack Overflow用户
发布于 2021-05-18 01:10:31
Flex box重新布局“自动”，所以最有可能的问题是，你缩小的框的大小仍然有相同的大小限制。我认为(不确定)是animate.js在动画开始前将html元素包装在一个相同大小的框中，这意味着元素的大小实际上并没有减小。
如果你所做的只是缩小你的盒子，你也可以尝试使用纯css /我们中的一小部分。
将两者(动画和纯js)组合在一起的修复方法是根据animate.js缩放动画更改图像的相对位置。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67573825
复制相关文章
相似问题
腾讯云开发者
