我有一个容器，里面有多个flex元素，用gap分隔.这些元素包装在容器中，并具有基于数组的大小，指定了一行中可以出现的数量(即每行4个= 25%).
现在，因为基于元素的大小没有考虑间隙大小，所以我们必须使用公式来确定元素的大小，同时考虑我们需要的间隙(从here开始):
calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--flex-gap)));
这工作得很好，很容易适应每行不同数量的Flex对象.但当改变gap的价值时，问题就出现了，同时进行了转换.
虽然转换前后的外观看起来像他们应该的那样，但在转换过程中，由于某种原因，计算不正确，因此多一个项目比应该的包装，直到确定它应该如何在外观之后看起来.这只会在降低gap的值时发生—当增加gap时，
在动画期间，两个值之间发生了什么导致宽度计算/间隙值不同步？
CodePen
$( "body" ).on( "click", function() {
$(".flexbox").toggleClass("bigger");
} );:root {
--flex-gap: 1rem;
}
.flexbox {
display: flex;
flex-wrap: wrap;
gap: var(--flex-gap);
justify-content: center;
transition: gap 0.5s;
}
.flexbox.bigger {
--flex-gap: 3rem;
}
.flex-items {
--flex-items: 4;
aspect-ratio: 2 / 1;
display: flex;
background: red;
flex: 1 1 calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--flex-gap)));
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<html>
<body>
<div class="flexbox">
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
<div class="flex-items"></div>
</div>
</body>
</html>