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