flex-shrink是控制flex项目在空间不足时收缩比例的属性，默认值为1，表示等比缩小；设为0则不收缩。它适用于弹性盒子子元素，常用于避免文本溢出、固定侧边栏+自适应主内容等场景。例如导航栏中左侧logo区设flex-shrink:0保持原尺寸，右侧标题文字默认可缩，确保布局不被撑开。该属性仅在容器空间不足时生效，需配合width或flex-basis使用以更好控制收缩行为。合理设置能让响应式布局更自然。
flex-shrink 控制 flex 项目在容器空间不足时是否“收缩”，避免溢出。它适用于弹性盒子（display: flex）中的子元素，是实现响应式布局的重要属性之一。
flex-shrink 是什么？
flex-shrink 是一个数字，表示项目相对于其他项目的收缩比例。默认值为 1，意味着所有项目在空间不够时等比缩小。设为 0 时，该项目不收缩，保持原有尺寸。
浏览器根据每个项目的 flex-shrink 系数 × 原始尺寸 来决定谁缩得多、谁缩得少。
常见使用场景
下面几种情况中，flex-shrink 能有效控制布局表现：
立即学习“前端免费学习笔记（深入）”；
• 避免文本内容溢出：当一行中有图标和文字，希望文字自动换行或压缩，而图标保持大小
• 固定侧边栏 + 自适应主内容区：侧边栏不缩，主区域在空间不足时优先压缩
• 表格式布局中防止列宽撑开容器
实际例子：侧边固定，主内容可缩
假设有一个导航栏，左侧是固定宽度的 logo 区，右侧是标题文字：
Gridster.js多列网格式拖动布局插件
网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件
74 查看详情
Logo标题内容很长会自动压缩这里
关键点：
• 左侧 div 设置 flex-shrink: 0，确保不被压缩
• 右侧未设置，使用默认值 1，空间不足时自动缩小
注意点
flex-shrink 只在容器空间不足以容纳所有项目时起作用。如果容器很宽，项目不会主动缩小。
同时，项目必须有明确的尺寸（如 width、min-width），否则浏览器难以计算收缩量。
搭配 flex-basis 或 width 使用效果更可控。
基本上就这些。合理使用 flex-shrink，能让弹性布局在不同屏幕下更自然地调整。不复杂但容易忽略细节。
以上就是css flex-shrink在布局中如何应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1037895.html
微信扫一扫 
支付宝扫一扫 
