flex-shrink 基于「flex-basis × flex-shrink」加权分配溢出空间，仅在子项初始总宽超容器时生效；压缩量=溢出量×(单项权重/总权重)，最终宽=flex-basis−压缩量。

flex-shrink 的压缩不是简单按数值比例切分，而是基于「flex-basis × flex-shrink」加权分配溢出空间。它只在所有子项的初始总宽度（含 padding、border）超过容器主轴尺寸时才生效。

触发条件：必须有“溢出”

只有当所有子项的 flex-basis 总和（或内容宽度 + padding + border）大于容器宽度 时，flex-shrink 才会起作用。没有溢出，就完全不压缩。

响应式烟草公司HTML5网站模板

响应式烟草公司HTML5网站模板是一款适合提供各种不同种类的优质烟草公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• flex-basis 是计算起点：优先级高于 width；设为 auto 时回退到 width 或内容宽度
• padding 和 border 默认计入初始宽度（即使 box-sizing: border-box 也不改变它们的占用）
• 若 flex-basis 总和 = 500px，容器宽 = 400px → 溢出量 = 100px，开始压缩

压缩量怎么算：看加权值，不是看 shrink 数字本身

浏览器真正比较的是每个子项的 flex-shrink × flex-basis，这个乘积叫“收缩权重”。权重越大，承担的压缩量越多。

• 总权重 = Σ(flex-shrink_i × flex-basis_i)
• 第 i 项压缩量 = 溢出量 × (flex-shrink_i × flex-basis_i) ÷ 总权重
• 最终宽度 = flex-basis_i − 压缩量

例如：容器宽 400px，A（flex-basis: 300px, flex-shrink: 1）、B（flex-basis: 200px, flex-shrink: 2）→ 总基准 500px，溢出 100px
权重 A = 300×1 = 300，B = 200×2 = 400，总权重 = 700
A 缩：100 × 300/700 ≈ 42.9px → 最终宽 ≈ 257.1px
B 缩：100 × 400/700 ≈ 57.1px → 最终宽 ≈ 142.9px

常见取值的实际效果

• flex-shrink: 0：完全不参与压缩，哪怕内容溢出也保持原尺寸（适合图标、按钮、头像等固定尺寸元素）
• flex-shrink: 1（默认）：和其他 flex-shrink: 1 的兄弟项按各自 flex-basis 加权分摊压缩
• flex-shrink: 2：在相同 flex-basis 下，压缩量接近 flex-shrink: 1 的两倍（因权重翻倍）
• 负值无效：如 flex-shrink: -1 会被忽略，按 1 处理

配合使用的关键提醒

• 想“固定宽度”，不能只靠 flex-basis，必须加 flex-shrink: 0
• 要让多个子项等宽填满容器，推荐用 flex: 1 1 0（即 flex-grow: 1; flex-shrink: 1; flex-basis: 0），避免内容宽度干扰
• 移动端易错位？检查是否误让文字多的项（flex-basis 大）和图标项（flex-basis 小）共用默认 flex-shrink: 1 —— 应给图标设 flex-shrink: 0，文字项保留或调高 shrink 值