flex子项width失效的根本原因是父容器启用display: flex后，子项默认flex: 0 1 auto，其中flex-basis: auto优先于width参与计算，且flex-shrink: 1会主动压缩尺寸；仅设flex-shrink: 0不稳妥，必须明确flex-basis（如flex: 0 0 50%），并确保父容器宽度确定，否则百分比失效；过渡动画中width无法插值因起始值为auto，需配合min-width设定确定像素值。
flex子项width失效的根本原因不是写错了CSS
Flex子项写了width: 50%或width: 200px却没生效，不是浏览器bug，也不是你漏写了单位——而是父容器启用display: flex后，子项默认继承flex: 0 1 auto。其中flex-shrink: 1开启收缩，会主动压缩子项尺寸；而flex-basis: auto优先于width参与主轴计算，导致你写的width只当个“参考”，根本没落地。
为什么只加flex-shrink: 0还不够稳妥
设flex-shrink: 0确实能关掉压缩，但若不同时明确flex-basis，浏览器仍可能回退到auto，尤其在内容宽度波动、父容器宽度未定死时，结果依然不可控。
-
flex: 0 0 50%最推荐：等价于flex-grow: 0; flex-shrink: 0; flex-basis: 50%，三者齐备，语义清晰 -
flex-shrink: 0; flex-basis: 200px也可行，但别混用width和flex-basis，否则行为不一致 - 避免
flex: 1或flex: 1 1 0——第三个值0会让flex-basis清零，width彻底失效
父容器宽度不确定时，flex-basis百分比照样失效
flex-basis: 50%不是“占父容器一半”，而是“占父容器当前计算出的主轴宽度的一半”。如果父容器本身是display: inline-flex、浮动、绝对定位，或被max-width、padding悄悄限制，那它的宽度可能远小于预期。
- 用开发者工具检查父容器Computed中的
width值，确认是否是你认为的“全宽” -
display: inline-flex没内容撑开时，宽度可能是0px，此时50%就是0px - 父容器若用了
white-space: nowrap又没配overflow: hidden，长文本会撑开它，间接影响子项百分比参照
过渡动画里width失效？min-width才是关键
给flex子项加transition: width 0.3s却没动画，大概率是因为Computed中width显示为auto——auto → 200px无法插值。这不是transition写错了，而是起始值不可知。
- 必须同时设置
min-width: 100px和width: 100px，再hover改width: 200px，浏览器才能拿到确定的起始像素值 -
min-width不能设为0（部分浏览器解析异常），建议用0.01px或1px - 更可靠替代方案：
transform: scaleX(1)+transition: transform，不触发重排，也不受flex干扰
flex-shrink: 0只是开关，真正让宽度落地的是flex-basis与父容器宽度的双重确定性。缺一不可。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
