在使用 Flex 布局时，如果想让子元素的尺寸或位置变化带有平滑过渡效果，可以通过 CSS transition 结合 flex 属性 实现动画。关键在于监控影响布局的可动画属性，比如 flex-grow、flex-basis 或 width，并配合 transition 实现流畅视觉效果。
1. 使用 flex-basis 控制主轴尺寸并添加过渡
在 Flex 容器中，子元素的主轴尺寸通常由 flex-basis 决定。这个属性可以被 transition 支持，因此适合用于动画。
示例：
.container {display: flex;
}
.item {
flex: 1;
height: 50px;
background: #007acc;
transition: flex-basis 0.3s ease;
}
.item.expanded {
flex-basis: 300px;
}
当给元素添加 expanded 类时，它的 flex-basis 会从自动（或初始值）变为 300px，transition 会让这个扩展过程平滑进行。
立即学习“前端免费学习笔记（深入）”；
2. 修改 flex-grow 实现比例伸缩动画
如果你希望子元素按比例放大或收缩，可以对 flex-grow 设置 transition。
注意：flex-grow 本身不是直接可动画的，但现代浏览器支持其过渡效果（部分需搭配 flex 简写）。
建议使用 flex 简写并明确指定基础值：
flex: 1;
height: 60px;
background: #4caf50;
transition: flex 0.3s ease;
}
.item.stretched {
flex: 3;
}
这样点击或触发类名变化时，该元素会逐渐占据更多空间。
3. 配合 width 或 max-width 的替代方案
若遇到 flex 属性动画不生效的情况，可以用 width 或 max-width 替代，并确保父容器为 flex 布局。
示例：
.container {display: flex;
}
.item {
width: 100px;
height: 50px;
background: #ff5722;
transition: width 0.3s ease;
}
.item.wide {
width: 200px;
}
这种方式兼容性更好，尤其适用于固定方向伸缩的场景。
4. 注意事项与常见问题
实现过程中需要注意以下几点：
- 确保
transition应用在需要变化的属性上，如flex-basis、flex或width - 避免使用
display: none切换显示，它会中断动画；推荐用visibility或控制opacity+height/width - 设置初始值明确，防止浏览器计算差异导致跳动
- 在移动端测试性能，避免过多同时动画造成卡顿
基本上就这些。通过合理使用 flex-basis 或 flex-grow 配合 transition，就能在 Flex 布局中实现自然的子元素动画效果。关键是选择可动画的属性并设置好过渡时间与缓动函数。
