Flex子元素width失效的根本原因是flex-basis优先级高于width，且默认flex: 0 1 auto中flex-basis: auto接管主轴尺寸，flex-shrink: 1进一步压缩，导致width完全不参与计算。
Flex子元素写了width却没生效，不是CSS写错了，也不是浏览器bug——是浏览器压根没打算用它。根本原因在默认的flex: 0 1 auto行为：其中flex-basis: auto优先接管主轴尺寸计算，flex-shrink: 1又会主动压缩，width连参与计算的机会都没有。
flex-basis: auto 为什么比 width 更有话语权
flex-basis是Flex主轴尺寸的“起点”，而width只是后备参考。只有当flex-basis为auto且父容器宽度确定时，width才可能被当作fallback；一旦flex-basis显式设为非auto值（比如flex-basis: 200px或flex: 1隐含的flex-basis: 0%），width就彻底被跳过。
-
flex: 1等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0%，此时width完全不进入计算流程 -
flex: 0 1 auto（默认）中，flex-basis: auto按内容宽度（如图片、长URL）定尺寸，不是你写的200px或50% - 开发者工具里看Computed →
width，如果显示auto，说明它根本没被采用
只设 flex-shrink: 0 为什么还是不行
关掉压缩只是半截子操作。不明确flex-basis，浏览器在内容变化、父宽波动时仍可能回退到auto，结果不可控。
- 错误写法：
flex-shrink: 0; width: 200px→width依然无效 - 推荐写法：
flex: 0 0 200px（三值语法），等价于flex-grow: 0; flex-shrink: 0; flex-basis: 200px - 百分比场景必须确保父容器有明确宽度：
flex-basis: 30%若父width为auto，结果就是0px
min-width: auto 在暗中撑开子项
Flex子项默认min-width: auto，它会把长单词、URL、图片等内容固有宽度当作不可压缩底线——哪怕你写了min-width: 120px或max-width: 80%，只要内容更宽，它就撑开。
立即学习“前端免费学习笔记（深入）”；
- 现象：含
https://example.com/very-long-path的盒子死活不换行、不收缩 - 解法：显式加
min-width: 0（注意是无单位的0，不是0px或0%） - 配合使用：
overflow-wrap: anywhere或word-break: break-word才能真正触发换行 - Grid + Flex嵌套时，
min-width: 0要写在Flex容器本身，不能只写在孙子节点上
响应式断点里最容易翻车的地方
媒体查询中只改width，不碰flex-basis，断点一到，宽度立刻失效。
- 错误写法：
@media (max-width: 768px) { .item { width: 100%; } }→width仍被忽略 - 正确写法：
@media (max-width: 768px) { .item { flex-basis: 100%; } } - 若父容器是
display: inline-flex，先确保它有width: 100%，否则flex-basis: 100%参照物为空 - 过渡动画中
transition: width 0.3s没效果？大概率是因为起始width是auto，无法插值；需配min-width: 1px和确定像素值
Flex里没有“纯靠width就能稳住”的捷径。每次布局失准时，优先检查flex-basis是否明确、flex-shrink是否关闭、min-width是否仍是auto——这三个点漏掉任何一个，都会在换设备、换内容、换浏览器时重新踩坑。
