flex-shrink不是缩小比例，而是按（flex-shrink × flex-basis）加权分配溢出空间的收缩量；flex-basis默认为auto，取width或内容宽度，且优先级高于width。
flex-shrink 不是简单按比例缩放，而是基于「收缩权重 × 基础尺寸」加权分配收缩量——忽略这点，flex-shrink 的行为就会看起来“不讲道理”。
flex-shrink 的实际计算公式不是 width × shrink
很多人误以为 flex-shrink: 2 就是“缩得比 flex-shrink: 1 多一倍”，但真实逻辑更精细：
- 收缩总量 = 容器总
flex-basis和 − 容器可用宽度（即溢出量） - 每个项目的收缩权重 =
flex-shrink× 对应的flex-basis（注意：不是最终渲染宽度，也不是width） - 单个项目收缩量 = 溢出量 ×（自身权重 ÷ 所有项目权重之和）
也就是说，flex-basis 越大、flex-shrink 越高，该项目承担的收缩任务就越重——哪怕它视觉上“看起来更宽”，也不代表它“该多缩”。
flex-basis 是 width 还是 content？
flex-basis 默认值是 auto，此时它取元素的 width（若显式设置了），否则退回到内容撑开的自然宽度（content-based）。关键点：
- 当
flex-basis: 30%时，百分比是相对于父容器主轴尺寸计算的，不是子元素自身； -
flex-basis: 200px会覆盖width，但width仍影响盒模型（比如 padding/border 是否计入）； - 如果同时设了
width和flex-basis，flex-basis优先级更高，但box-sizing: border-box会影响最终基础尺寸是否含 padding/border。
flex-shrink: 0 为什么有时还被压缩？
常见错觉：设了 flex-shrink: 0 就绝对不缩小。但实际中仍可能变窄，原因有：
- 父容器
min-width或overflow: hidden强制裁剪，视觉上“变窄”，但不是 flex 收缩行为； - 子元素内部文本无换行（
white-space: nowrap）+ 父容器空间不足，导致内容溢出或强制挤压 inline 内容； - 其他 flex 项目
flex-shrink > 0收缩后，剩余空间仍不够容纳该元素——此时浏览器会按最小内容宽度（min-content）截断或换行，而非 flex 计算逻辑。
响应式场景下 flex-basis 和媒体查询的协作陷阱
在移动设备上常写 @media (max-width: 768px) { .item { flex-basis: 100%; } }，但要注意：
-
flex-basis是初始尺寸，后续flex-shrink仍会基于这个新 basis 计算收缩权重； - 若同时用
width和flex-basis，不同浏览器对优先级处理略有差异（尤其 Safari 旧版）； - 避免在 media query 中只改
flex-shrink而不调flex-basis：basis 不变时，shrink 值变化可能因权重归一化反而让收缩分配更不直观。
真正可控的做法是：响应式切换时，统一控制 flex 简写（如 flex: 0 0 100%），明确锁定 grow/shrink/basis 三者关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
