flex-shrink是控制flex元素在空间不足时收缩比例的属性，默认值为1，表示按权重收缩；设置为0则不收缩。其计算基于“自身宽度×flex-shrink”得出的加权比例分配压缩量，常用于防止元素被挤压变形，配合flex-basis和min-width使用更佳。
在 CSS Flexbox 布局中，flex-shrink 属性用于控制 flex 元素在其容器空间不足时的收缩行为。它决定了元素相对于其他 flex 项目收缩的比例。
flex-shrink 是什么？
flex-shrink 是一个数字，表示当前 flex 项目在空间不够时可以被压缩的“权重”。默认值是 1，意味着所有 flex 项目在需要时会按比例收缩。
如果设置为 0，则该元素不会收缩，即使容器空间不足；大于 1 的值则代表它比其他元素更“愿意”被压缩。
工作原理：如何计算收缩尺寸？
当所有 flex 项目的总宽度超过容器时，浏览器会根据每个项目的 flex-shrink 值和其自身尺寸来计算应压缩多少。
立即学习“前端免费学习笔记（深入）”；
收缩量不是简单地平均分配，而是加权计算：
- 每个元素的“收缩权重” = 自身宽度 × flex-shrink 值
- 总收缩权重 = 所有项目的收缩权重之和
- 每个项目被减去的空间 = (自身权重 / 总权重) × 超出的总空间
这意味着一个宽元素或高 flex-shrink 值的元素会被压缩得更多。
常见使用场景与示例
假设你有一个容器和两个子元素，希望第二个不被压缩：
.container {
display: flex;
width: 300px;
}
.item1 {
width: 200px;
flex-shrink: 1;
}
.item2 {
width: 200px;
flex-shrink: 0; /* 不收缩 */
}
总内容宽 400px > 容器 300px，超出 100px。此时 item1 会收缩 100px（因为 item2 不参与），最终显示为 100px 宽，而 item2 保持 200px。
若两者都为 flex-shrink: 1，则它们会等比压缩，各减少 50px，最终都是 150px 宽。
实用建议
- 想让某个元素“固定宽度、不被挤压”，设置 flex-shrink: 0
- 避免内容被过度压缩导致文字重叠，可结合 min-width 使用
- 通常配合 flex-grow 和 flex-basis 使用，简写为
flex: 0 1 auto等形式 - 调试时注意元素实际尺寸是否包含 padding 或 border
基本上就这些。理解 flex-shrink 的加权机制，能更精准控制布局中的压缩行为，避免意外变形。不复杂但容易忽略细节。
