Flex子项width过渡失效主因是computed值为auto导致无法插值，应设min-width与width同值或改用transform:scaleX()；transition须写在基础选择器而非:hover中。
Flex 布局里 width 过渡“没动画”或“直接跳变”，不是 transition 写错了，而是浏览器根本没拿到两个可插值的像素值——起始 width 很可能还是 auto。
为什么 computed width 显示 auto，transition 就失效
Flex 子项的 width 默认受 flex-grow、flex-basis 和内容影响，即使你写了 width: 200px，也可能被 flex: 1 覆盖，最终 computed 值仍是 auto。而 auto → 200px 无法插值，浏览器跳过过渡，直接重排。
- 打开 DevTools → Computed 面板，搜
width，确认它显示的是具体像素（如200px），而不是auto - 解决办法：同时设置
min-width: 200px和width: 200px——min-width不参与 flex 拉伸，能稳住起始值 - 避免
min-width: 0，部分浏览器解析异常；改用min-width: 0.01px或1px
flex-grow 本身不能过渡，别白费力气写 transition: flex-grow
flex-grow 是布局算法参数，不是视觉属性，CSS 规范未将其定义为可插值。就算 Chrome 声称支持，也只在极窄条件下（如 flex: 1 1 200px → flex: 3 1 200px）勉强可用，Safari 和旧版 iOS 浏览器基本不认。
- DevTools 里看到
flex-grow: 1，不代表它能被过渡；查transition-property，大概率是none - 真正可过渡的是
flex-basis，但必须是具体值（200px或50%），不能是auto - 更稳妥的做法：用
flex简写切换，并确保起止状态的flex-basis类型一致（都用 px，或都用 %）
比 width 更可靠的选择：transform: scaleX()
transform 不触发 layout，不受 flex 尺寸逻辑干扰，且插值稳定。只要初始和目标状态都声明完整，就能平滑过渡。
- 写法示例：
transform: scaleX(1)→transform: scaleX(1.5)，配合transform-origin: left center - 不要只写
translateX()而漏掉其他 transform 子属性，否则浏览器可能回退到默认值引发闪动 - 注意子元素也会被缩放；若需保持文字/图标大小不变，对子元素加反向缩放（如
transform: scaleX(0.667)） - 慎与
width同时设置，可能降级为软件渲染，反而更卡
transition 必须写在基础选择器里，不是 hover 里
这是最常被忽略的配置错误：把 transition 只放在 :hover 规则中，会导致移出时无过渡，甚至首帧错位。
- 错误写法：
.box:hover { width: 300px; transition: width 0.3s; } - 正确写法：
.box { width: 100px; transition: width 0.3s; } .box:hover { width: 300px; } - 务必去 Computed 面板验证
transition-property和transition-duration是否生效，而非只看 Styles 面板 - 检查是否有全局样式（如
* { transition: none !important; }）意外覆盖了你的规则
真正难处理的不是语法，而是浏览器在 layout、paint、composite 三阶段之间的权衡——flex 布局本身就在 layout 阶段动态计算尺寸，而 transition 引擎需要确定的数值锚点。一旦父容器宽度不固定、或子项 min-width 缺失、或 transform 错挂到容器上，整个链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
