flex-basis设auto无法过渡，因其是计算值而非可动画的离散状态；浏览器无法插值auto与具体尺寸，导致transition静默失效。
flex-basis 直接设 auto 为什么过渡不了
因为 flex-basis: auto 是一个计算值，不是可动画的离散状态；浏览器无法插值「从 auto 到 200px」或「auto → content-size」。你写 transition: flex-basis 0.3s，但起始/结束值中只要有一方是 auto，整个过渡就静默失效——既不报错，也不动。
实操建议：
- 增删前，用
getComputedStyle(item).flexBasis读出当前值（通常是px或0px），别信默认 - 插入新项时，先设
style.flexBasis = '0px'+style.opacity = '0'，再offsetHeight强制重排 - 立刻切到目标值：比如
style.flexBasis = '200px'+style.opacity = '1'，并确保已声明transition: flex-basis 0.25s ease, opacity 0.25s ease - 避免在
@keyframes里驱动flex-basis，CSS 动画不支持该属性的动态计算路径
用 flex-basis 过渡替代 height/max-height 的真实好处
比起常见的 max-height 方案，flex-basis 过渡更贴合列表项在 flex 容器中的实际布局角色：它控制的是“主轴上的基准尺寸”，天然参与剩余空间分配，不会因内容高度突变而卡顿或截断。
典型问题场景：
立即学习“前端免费学习笔记（深入）”；
-
max-height: 500px遇到字体缩放或行高变化时，上限可能不够，导致内容被裁剪 - 多个列表项同时展开，
max-height每个都要单独算，JS 维护成本高；而flex-basis只需统一设初始值 + 目标值，由 flex 自动对齐 - 当列表项内含
flex: 1子容器时，max-height会干扰其伸缩逻辑；flex-basis则与之共存无冲突
动态插入后 flex-basis 不生效的三个硬伤点
常见现象：JS appendChild() 新节点后，它完全不响应 flex-basis 过渡，甚至塌成一条线。
关键检查项：
- 父容器是否真的处于
display: flex状态？注意display: contents或visibility: hidden会让子元素脱离 flex 上下文 - 新节点是否带
flex相关样式？仅靠继承不够，必须显式设style.flex = '0 1 auto'或至少style.flexGrow = '1' - 是否误用了
setAttribute('style', ...)覆盖了原有内联样式？推荐用element.style.flexBasis = '0px'单独赋值，不碰其他 style 属性
flex-basis 过渡和 order 过渡能一起用吗
能，但要分清职责：两者解决不同问题，混用反而容易打架。
order 控制排序位置，适合拖拽重排、filter 后顺序变更；flex-basis 控制单个项在主轴上的“占位宽度/高度”，适合展开收起、加载占位、条件显隐。
若同时触发（比如拖拽+展开），注意：
- 不要在同一个
transition声明里写transition: order 0.2s, flex-basis 0.2s—— 浏览器会按各自节奏跑，视觉上可能错拍 - 优先用
requestAnimationFrame分两帧更新：第一帧改order，第二帧再改flex-basis - IE11 不支持
order过渡，但支持flex-basis（需配-ms-flex-preferred-size）；如需兼容，只靠flex-basis更稳
