Flexbox结合CSS动画可通过控制尺寸、对齐和顺序实现交互效果。1. 改变flex-basis实现侧边栏展开；2. 调整justify-content触发状态栏居中滑动；3. 使用order与opacity制作卡片轮播；4. 响应式布局中模拟弹性过渡，需配合可动画属性优化体验。
Flexbox 本身不是动画工具，但它与 CSS 动画结合时，能高效实现流畅的交互效果。通过控制 Flex 容器或子项的尺寸、顺序、对齐方式等属性，配合过渡（transition）或关键帧动画（@keyframes），可以创建自然、响应式的界面动效。
利用 Flex 属性实现展开/收起动画
常见于导航菜单或折叠面板中。通过改变 flex-basis 或 flex-grow 配合 transition 实现平滑拉伸。
示例：侧边栏展开设置容器为 flex，并对 flex-basis 添加过渡：
.sidebar {
display: flex;
flex-direction: column;
flex-basis: 60px;
transition: flex-basis 0.3s ease;
}
.sidebar:hover {
flex-basis: 200px;
}
鼠标悬停时，侧边栏沿主轴扩展，内容随之重新布局，动画自然。
动态调整对齐方式触发位移动画
Flex 的对齐属性如 justify-content 和 align-items 可用于控制子元素的位置。当这些值变化时，结合 transition 能产生整体位移效果。
立即学习“前端免费学习笔记（深入）”；
应用场景：居中提示条切换显示比如一个状态栏在不同状态下左右对齐：
.status-bar {
display: flex;
justify-content: flex-start;
transition: justify-content 0.4s;
}
.status-bar.error {
justify-content: center;
}
切换 error 类时，文字从左侧滑动到中间，视觉反馈清晰。
使用 order 与 opacity 实现卡片轮播
Flex 的 order 属性控制子项显示顺序。配合透明度和位移动画，可制作简易轮播图。
基本思路：
- 所有卡片设为 flex 子项，宽度 100%
- 默认只显示第一张（order: 1），其余隐藏（order: 2）
- 通过 JS 切换 class，修改 order 和 opacity
- 添加 transition 实现淡入淡出+位移
.carousel-item {
flex: 0 0 100%;
opacity: 0;
transition: opacity 0.5s, transform 0.5s;
}
.carousel-item.active {
order: 1;
opacity: 1;
transform: translateX(0);
}
.carousel-item.prev {
order: 2;
transform: translateX(-100%);
}
用户点击“下一页”时，active 类切换，旧卡片左移淡出，新卡片右移进入。
响应式布局中的弹性过渡动画
在媒体查询中改变 flex-direction 或子项的 flex 值时，也可加入动画让布局切换更柔和。
例如移动端从横排变为竖排：
.container {
display: flex;
flex-direction: row;
gap: 10px;
transition: flex-direction 0.4s;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
虽然 flex-direction 不支持直接过渡，但可通过 transform 模拟或结合 opacity、height 等可动画属性增强体验。
基本上就这些。关键在于选择可动画的属性（如 width、opacity、transform），用 Flex 构建结构，再通过类切换驱动变化。不复杂但容易忽略细节，比如设置 overflow: hidden 防止溢出，或用 will-change 提升性能。
