flex-grow 本身不可直接动画，需用 flex 简写（如 flex: 1 1 200px → flex: 3 1 200px）并保持 flex-basis 类型一致才能实现平滑过渡，避免 auto 值和隐式声明。
flex-grow 本身不是标准可动画属性，但现代浏览器（Chrome 84+、Firefox 75+、Safari 14.1+）在配合 flex 简写时能触发平滑过渡——前提是起止值都为具体数字，且不能含 auto 或未声明的隐式值。
为什么直接对 flex-grow 设置 transition 常常失效
浏览器不支持对单个 flex-grow 属性做插值计算。即使写了 transition: flex-grow 0.3s，多数情况下会跳变。根本原因是：CSS 动画引擎无法将 flex-grow: 1 和 flex-grow: 3 映射为连续数值区间（尤其当父容器尺寸不确定、子项有 flex-basis: auto 时）。
- 起始状态若为
flex: 1（即flex-grow: 1; flex-shrink: 1; flex-basis: 0%），而目标是flex-grow: 3，但没重置flex-basis，会导致计算冲突 - 使用
flex: 1→flex: 3是可行的，因为flex是简写，浏览器会把整组值当作原子单位处理 - 若混用
flex-grow单独设置 +transition，等于让引擎“猜”怎么插值，结果不可控
正确写法：用 flex 简写替代单独改 flex-grow
必须显式定义起止状态的完整 flex 值，且保持 flex-basis 类型一致（推荐用 px 或 %，避免 auto）。
.item {
flex: 1 1 200px; /* grow shrink basis */
transition: flex 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.item.active {
flex: 3 1 200px;
}-
flex: 1 1 200px和flex: 3 1 200px的flex-basis都是固定值，浏览器可安全插值flex-grow - 省略
flex-shrink（如写成flex: 1 200px）会导致隐式flex-shrink: 1，但建议显式写出，避免意外压缩 - 不要用
flex: 1→flex: 3，因为后者等价于flex: 3 1 0，flex-basis: 0与前者flex-basis: 0%不等价，易跳变
移动端和旧版 Safari 的兼容 fallback 方案
Safari 13.1–14.0 对 flex 简写的过渡支持不稳定，常卡在中间帧。此时应降级为 width 或 max-width 控制主轴尺寸。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex，子元素用width替代弹性伸缩：transition: width 0.35s - 若需响应式，可用
max-width+flex: 1组合，比如max-width: 300px→max-width: 600px - 避免同时动画多个
flex子项，iOS WebKit 渲染管线容易丢帧；加will-change: flex可能加重内存压力，不推荐
容易被忽略的强制重排陷阱
哪怕只动 flex-grow，只要父容器宽度在动画中动态变化（比如由 JS 改 container.style.width），就会触发强制同步布局（forced layout）。结果是：动画卡顿、掉帧、甚至直接跳到终点。
- 确保父容器尺寸稳定，或用
transform: scale()模拟缩放，避开重排 - 不要在
transition过程中读取offsetWidth、getComputedStyle()等会触发重排的 API - 调试时打开 Chrome DevTools → Rendering → “Paint flashing” 和 “Layout Shift Regions”，能立刻暴露重排源头
真正起作用的从来不是 flex-grow 本身，而是你有没有把它的行为约束在浏览器可预测的数值空间里。值越具体、上下文越干净，动画越可靠。
