基于百分比的Flex元素在过渡gap值时出现错位跳动问题

核心原因 #

这个问题的本质是Flex布局的换行判断逻辑与CSS变量过渡的精度/时序差异：

• 你用的calc公式在数学上完全准确：对于每行n个元素，元素宽度W = (100% - (n-1)*G)/n（G为gap值），代入后总宽度n*W + (n-1)*G刚好等于容器宽度，理论上不会触发换行。
• 但浏览器在过渡动画的逐帧渲染中，会对CSS变量（--flex-gap）进行插值计算，而calc表达式的计算、Flex布局的换行判断这两个步骤之间，可能出现浮点精度丢失或者帧级别的计算不同步：
  • 当减小gap时，元素宽度随gap减小而增大，过渡过程中某一帧的像素取整操作，可能导致n*W + (n-1)*G的总和短暂超过容器宽度，触发额外换行。
  • 增大gap时元素宽度是减小的，总宽度只会小于等于容器宽度，因此不会触发异常换行。

解决方案 #

有两种可靠的修复方式：

1. 禁用Flex元素的收缩特性

既然已经通过calc精确计算了元素宽度，不需要Flex的自动收缩功能，给元素设置flex-shrink: 0，让宽度严格遵循calc结果：

.flex-items {
    --flex-items: 4;
    aspect-ratio: 2 / 1;
    background: red;
    /* 将flex:1 1 ... 改为 flex:0 0 ...，禁用grow和shrink */
    flex: 0 0 calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--flex-gap)));
}

2. 改用CSS Grid布局（推荐）

Grid布局天生支持列宽与间隙的协同计算，不需要复杂的calc公式，过渡gap时逻辑更稳定：

.flexbox {
    display: grid;
    /* 直接指定每行数量，Grid自动分配列宽并预留gap空间 */
    grid-template-columns: repeat(var(--flex-items), 1fr);
    gap: var(--flex-gap);
    justify-content: center;
    transition: gap 0.5s;
}

.flex-items {
    aspect-ratio: 2 / 1;
    background: red;
    /* 无需calc，Grid自动处理宽度 */
}

验证代码（禁用收缩版） #

<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>

: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;
    background: red;
    flex: 0 0 calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--flex-gap)));
}

$( "body" ).on( "click", function() {
  $( ".flexbox" ).toggleClass( "bigger" );
} );

内容的提问来源于stack exchange，提问作者GtwoK