答案：通过设置flex-basis并结合transition可实现Flex子元素尺寸过渡动画。具体做法是为子元素定义明确的flex-basis值，并对其应用transition，切换类名时触发flex-basis变化，配合flex-grow实现平滑伸缩效果，同时需确保容器为flex布局，避免使用flex:1省略写法以防止动画失效。
在CSS中实现弹性盒子（Flexbox）子元素的尺寸变化过渡效果，关键在于合理使用 flex 属性结合 transition 动画。虽然直接对 flex 属性设置过渡看似无效，但通过正确的写法，完全可以实现平滑的动画效果。
理解 Flex 子元素可动画的属性
Flex 布局中，真正影响子元素尺寸的是其最终的宽度或高度（取决于主轴方向）。虽然不能直接对 flex: 1 这样的缩写做动画，但可以对以下属性进行过渡：
- flex-basis：定义子项的初始主轴尺寸，是可动画的
-
flex-grow 和 flex-shrink：虽然单独变化不会触发重绘动画，但配合
flex-basis可间接参与过渡 - width / height：在非弹性维度上也可用于动画控制
实现尺寸过渡的关键技巧
要让 Flex 子元素在状态切换时产生平滑过渡，需显式设置 flex-basis 并对其应用 transition。
例如，一个默认收缩的侧边栏点击后展开占满剩余空间：
.sidebar {
flex: 0 0 60px; /* 默认不增长，基础宽度60px */
transition: flex-basis 0.3s ease;
}
.sidebar.expanded {
flex: 1 1 240px; / 允许增长，基础宽度240px /
}
这里虽然写了 flex 缩写，但动画实际作用于 flex-basis 从 60px 到 240px 的变化过程，同时 flex-grow 启用使元素填充剩余空间。
JavaScript 控制状态切换
通过 JS 添加或移除类名来触发动画，是最常见做法：
document.querySelector('.toggle-btn')
.addEventListener('click', () => {
document.querySelector('.sidebar').classList.toggle('expanded');
});
.addEventListener('click', () => {
document.querySelector('.sidebar').classList.toggle('expanded');
});
确保容器使用 Flex 布局：
.container {
display: flex;
}
避免常见问题
某些情况下动画可能失效，注意以下几点：
- 不要只写
flex: 1而忽略flex-basis的具体值，否则浏览器难以计算中间帧 - 确保过渡属性明确，如
transition: flex-basis 0.3s - 避免在动画过程中频繁修改 DOM 或强制重排
- 若需高性能动画，可考虑用
transform: scaleX()模拟，但会影响布局流
基本上就这些。掌握 flex-basis 的作用和过渡机制，就能在 Flex 布局中实现自然的子元素尺寸动画。不复杂但容易忽略细节。
