为可变宽度flexbox项目预留空间，避免动态换行

针对你遇到的问题，有两个更简洁的Flex原生方案可以解决，不需要额外嵌套容器或者同步动画外边距：

方案1：利用flex-basis + flex-shrink: 0 #

给每个动态宽度的项目设置：

.item {
  flex: 0 0 [项目最终宽度]; /* 等价于 flex-grow:0; flex-shrink:0; flex-basis:[最终宽度] */
  width: [项目初始宽度];
  animation: widthGrow 0.5s forwards;
}

@keyframes widthGrow {
  to {
    width: [项目最终宽度];
  }
}

原理：flex-shrink:0会阻止项目被压缩，flex-basis直接指定了项目在Flex布局中的最终占用空间，容器会提前为所有项目预留好总宽度，不会因为后续宽度动画触发换行。而width动画只是在预留好的空间内从窄变宽，完全不影响布局计算。

方案2：用transform: scaleX()做视觉缩放动画 #

如果不想修改width属性，也可以用transform实现无布局影响的动画：

.item {
  flex: 0 0 [项目最终宽度];
  transform: scaleX([初始宽度/最终宽度的比例]);
  transform-origin: left center; /* 从左侧开始缩放，保持对齐 */
  animation: scaleGrow 0.5s forwards;
}

@keyframes scaleGrow {
  to {
    transform: scaleX(1);
  }
}

原理：transform属于视觉层变换，不会改变元素的实际布局空间，Flex容器依然基于flex-basis的最终宽度预留空间，动画过程中完全不会触发换行，而且这种动画性能更好（GPU加速）。

这两个方案都不需要额外DOM结构，纯靠Flex属性+动画解决问题，比你提到的两种方式更简洁可靠。

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