flex-basis无法transition动画，因其属布局属性、非可动画化属性；应改用width+transition或transform:scalex()实现拉伸挤压效果。
直接用 flex-basis 配 transition 做拉伸挤压效果，基本跑不通——浏览器不支持对 flex-basis 的过渡动画。 这不是写法问题，是 CSS 规范本身限制：flex-basis 属于“布局属性”，触发的是重排（reflow），不能被 transition 动画化。你看到的“动了”，其实是其他属性（比如 width）在起作用，或者靠 JS 手动插值模拟。
为什么 flex-basis 无法 transition
浏览器只对“可动画化属性”（animatable properties）支持 transition，而 flex-basis 在所有主流引擎（Chrome/Firefox/Safari）中均未列入该列表。即使写了 transition: flex-basis .3s，实际也完全无效，开发者工具里能看到 computed 值突变，毫无过渡。
- 查 MDN 或 CSS Transitions spec，
flex-basis明确标注为 not animatable - 实测：给元素设
flex: 0 1 200px，再用 JS 改style.flexBasis = '300px'，没有任何过渡；但改style.width就能动 - 替代方案只有两个：用
width（需脱离 Flex 主轴控制）或用transform: scaleX()（仅视觉缩放，不真实挤压内容）
真正可用的挤压拉伸方案：width + flex-shrink 组合
要让侧边栏随拖拽“挤压主内容区”，必须让两个区域共处于一个 display: flex 容器中，并且主内容区启用弹性收缩。关键不在 flex-basis 动画，而在 width 变更后，靠 flex-shrink 让另一侧自动响应。
- 侧边栏设固定
width（如240px），并加transition: width .25s ease - 主内容区必须设
flex: 1（即flex-grow: 1; flex-shrink: 1; flex-basis: 0），否则不会随侧边栏变宽而自动变窄 - 避免给主内容区加
min-width，否则挤压到临界点就卡住，出现横向滚动条 - 如果侧边栏用了
position: fixed，这套逻辑失效——它已脱离文档流，主内容区根本感知不到它的宽度变化
resize 拖拽时的兼容性坑
用 resize: horizontal 实现拖拽拉伸，看似纯 CSS，但实际体验差异极大。
-
resize只在overflow不为visible的块级元素上生效，且默认只暴露右下角小控点 - 想把拖拽区域拉成一条竖线（如 IDE 那样），得靠
::-webkit-scrollbar伪元素“偷梁换柱”：把滚动条宽度撑满容器高度，再设opacity: 0隐藏内容，只留视觉拖拽线 - Firefox 对
resize: horizontal支持极弱，拖拽线几乎不可见；Safari 在某些嵌套场景下会失灵 - 拖拽结束时，
element.style.width是内联样式，优先级高于 CSS 文件里的flex-basis，后续 JS 控制可能被覆盖，需手动清除style.width
挤压效果里最容易被忽略的一点
挤压不是单纯“侧边栏变宽、主区变窄”，而是两者宽度之和必须严格等于容器宽度。一旦侧边栏用了 border、padding 或 box-shadow，又没设 box-sizing: border-box，主内容区就会被多挤出几个像素，导致布局错位或滚动条意外出现。所有参与挤压的元素，box-sizing 必须统一为 border-box，且检查是否意外继承了父级的 margin 或 gap。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
