flex项目transition不生效的根源在于flex属性受布局算法强干预：flex-basis仅在显式长度值下可动画，justify-content等对齐属性不可动画，应改用transform模拟；涉及重排的过渡易被浏览器跳过。
flex 项目尺寸变化时 transition 不生效
Flex 项目（flex-item）的 width、height、flex-basis 等属性在 flex 容器中受布局算法强干预，直接对它们加 transition 往往无效——浏览器可能跳过过渡，直接重排。
-
flex-basis是最常踩坑的：它虽可动画，但仅当显式声明为长度值（如200px）时才触发；设为auto或content时无法过渡 - 用
transform: scaleX()或scaleY()替代宽高变更更可靠，因为transform属于合成层属性，不触发重排 - 若必须动
flex-basis，确保起始/结束值都是具体像素或百分比，且容器display: flex未被动态切换（切换会清空过渡状态）
flex 容器 justify-content / align-items 变化无过渡
这些是布局对齐控制属性，本身**不可动画**。浏览器规范明确将它们列为非可过渡属性，设了 transition: justify-content 0.3s 完全无效。
- 想实现“项目居中位置渐变”，改用
transform: translateX()+transition模拟 - 对齐逻辑复杂时，优先把位移逻辑下沉到子元素上，而非依赖容器对齐属性变化
- 检查 computed style：用 DevTools 查看
justify-content计算值是否真在变——有时 JS 修改的是原始值，但 flex 布局已将其标准化为等效值，导致“看似变了实则没变”
过渡触发但表现卡顿或跳变
常见于 flex 容器内子项数量动态增减后立即触发动画，此时浏览器需同步执行 layout → paint → composite，容易丢帧。
- 避免在
flex-direction: column容器中对大量子项的height做过渡——每项重排都会引发整列重计算 - 给过渡元素加
will-change: transform（仅限必要时），提示浏览器提前升层，但别滥用，否则内存开销上升 - 用
getComputedStyle(el).flexBasis在 JS 中读取当前值再设新值，避免“读写冲突”导致强制同步布局
.element {
flex: 0 0 100px; /* 初始 flex-basis 显式设为长度 */
transition: flex-basis 0.3s ease, transform 0.3s ease;
}
<p>.element.expanded {
flex-basis: 300px; /<em> 必须是具体长度，不能是 auto </em>/
transform: scaleX(1.2); /<em> 辅助强化视觉连续性 </em>/
}</p>flex 布局下过渡异常，根源常不在 CSS 写错，而在没意识到 flex 属性和普通盒模型属性的动画边界不同——flex-basis 可动但有前提，justify-content 根本不动，而任何涉及重排的过渡都容易被浏览器优化掉。
立即学习“前端免费学习笔记（深入）”；
