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 值和其自身尺寸来计算应压缩多少。
立即学习“前端免费学习笔记（深入）”；
收缩量不是简单地平均分配，而是加权计算：
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情 每个元素的“收缩权重” = 自身宽度 × 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 的加权机制，能更精准控制布局中的压缩行为，避免意外变形。不复杂但容易忽略细节。
以上就是css flex-shrink控制元素收缩行为的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1058663.html
微信扫一扫 
支付宝扫一扫 
