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）。关键点：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

立即学习“前端免费学习笔记（深入）”；

• 当 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 三者关系。