flex容器内元素动画时被压扁，根本原因是默认flex-shrink: 1在重排时触发压缩；应为动画元素显式设置flex-shrink: 0，并配合flex: 0 0 auto、width: auto、height: auto及object-fit等确保尺寸稳定。
Flex容器里加动画，元素突然被压扁了怎么办
不是动画本身的问题，是Flex默认的 flex-shrink: 1 在动画触发重排时“趁机压缩”——尤其当动画改变尺寸、位置或触发 layout thrashing 时，浏览器会重新计算 flex 分配，没关 shrink 的元素就容易塌。
最直接的应对方式：对参与动画的元素（比如正在 transform 或 width 变化的子项）显式设 flex-shrink: 0。它不阻止动画，只切断收缩逻辑，让动画按你写的数值真实执行。
- 别只在 hover 或 keyframes 里改 width/height，得先稳住 flex 行为：加
flex-shrink: 0是前置条件 - 如果动画目标是缩放（
scale()），flex-shrink: 0能防止父容器在重排时先把它“挤瘪”再放大，避免形变抖动 - 用
transform: translateX()位移动画时，flex-shrink: 0不影响效果，但能避免因 flex 布局重算导致的微小偏移 - React/Vue 中组件动态挂载+动画同时发生，常出现首帧挤压——此时
flex-shrink: 0比min-width更早生效
图片 + 动画一起用，为什么越动越变形
图片在 Flex 容器里做动画（比如淡入+滑入），却出现拉伸、压扁、错位，根本原因不是 animation 写错了，而是 img 默认受 flex-shrink: 1 和 align-items: stretch 双重影响，动画只是暴露了问题。
单写 flex-shrink: 0 还不够，必须配合三要素：flex-basis: auto、width: auto、height: auto，否则动画过程中浏览器可能回退到错误的 intrinsic 尺寸计算。
- 推荐一行写死：
img { flex: 0 0 auto; width: auto; height: auto; } - 如果动画含
max-width变化，确保max-width不覆盖width: auto，否则flex-basis: auto失效 -
object-fit必须和动画共存：比如animation: slideIn 0.3s; object-fit: cover;，否则动画改的是外框，内容仍在拉伸 - 移动端尤其注意：Safari 对
flex: 0 0 auto+transform组合有渲染延迟，加will-change: transform可缓解
文字按钮带悬停动画，hover时图标缩成一个点
典型现象：按钮内含图标 + 文字，hover 时背景色变、文字上浮，但图标瞬间缩小——这是 flex-shrink: 1 在 hover 触发重绘时，把图标这种小尺寸元素当成“可牺牲项”优先压缩。
解决关键不是调 font-size 或加 min-width，而是让图标容器彻底退出 flex 收缩队列。
- 给图标外层
div或span加flex-shrink: 0（不是给i或svg直接加） - 若图标是
background-image，需确保容器有明确宽高，且flex-shrink: 0生效节点是该容器 - 文字部分可保留
flex-shrink: 1，但加min-width: max-content防止字被压碎 - 避免用
flex: 1包裹整个按钮——它等价于flex-shrink: 1，会把内部所有子项拖进压缩池
动画中 flex-wrap: wrap 导致布局跳变
看起来像动画卡顿或错位，实际是 flex-wrap: wrap 在动画过程中因宽度临界点反复触发换行，每次换行都引发 flex 重分配，flex-shrink 在不同行间行为不一致，造成视觉跳跃。
这不是兼容性问题，是布局模型本身的响应机制。临时禁用 flex-wrap 或改用其他方案更可靠。
- 确认是否真需要换行：很多“换行需求”其实可用
overflow-x: auto+ 横向滚动替代，动画更稳定 - 若必须换行，把动画元素单独提一层：用绝对定位脱离 flex 流，只对静态背景容器设
flex-wrap - 不要在动画关键帧里动态切
flex-wrap值——浏览器不保证过渡平滑，且flex-shrink行为会突变 - 调试时在开发者工具里临时关闭
flex-wrap，看跳变是否消失，就能快速定位根源
flex-shrink: 0 是唯一能提前“锁住”尺寸的声明，但它必须出现在动画开始前、且作用在正确的 DOM 节点上。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
