flex子项width常被忽略，因默认flex: 0 1 auto中flex-shrink: 1允许压缩且flex-basis: auto优先按内容计算，width仅作参考；须配flex-shrink: 0与显式flex-basis（如flex: 0 0 200px）才生效。
flex子项的width为什么常被忽略
不是浏览器“不认”width，而是它根本没机会生效——子元素默认继承flex: 0 1 auto，其中flex-shrink: 1允许压缩，flex-basis: auto优先按内容宽度计算初始尺寸，width只剩一个旁观者。
用flex-shrink: 0前必须配flex-basis
只写flex-shrink: 0不够，浏览器仍会回退到flex-basis: auto，结果还是看文字撑多宽。必须显式指定基准：
-
flex: 0 0 200px（推荐）：等价于flex-grow: 0; flex-shrink: 0; flex-basis: 200px -
flex-shrink: 0; flex-basis: 50%：但要注意父容器是否定宽，否则百分比无意义 - 避免混用：
width: 200px和flex-basis: 50%共存，不同浏览器解析不一致
父容器宽度不定时flex-basis百分比失效
flex-basis: 50%是相对于父容器计算的，如果父容器没定宽，结果就不可控：
- 父容器是
display: inline-flex且没内容撑开 → 宽度为 0，50% 就是 0 - 父容器被
max-width、浮动、position: absolute限制 → 百分比按那个受限宽度算 - 用开发者工具检查父容器
Computed中的width值，确认是否是你以为的“全宽”
IE 和旧 Safari 对flex-basis百分比支持差
IE10/11 几乎不认flex-basis百分比；Safari ≤12.1 也有兼容性问题。2026 年仍需谨慎：
- 优先用固定值：
flex-basis: 200px或flex: 0 0 200px - 若必须用百分比，加降级：
min-width: 200px配合flex-basis: 50% - 不要依赖
width+flex-shrink: 0组合，部分旧引擎仍会忽略
flex-basis看着像width，但它依赖上下文更严苛，一环断，全链崩。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
