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 区，右侧是标题文字：
YIXUNCMS中秋专版2.0.4
下载
系统介绍：YIXUNCMS中专专版是易迅软件工作室在中秋节来临之即推出的专题模板建站系统，使用增强版后台管控系统，板板设计符合节日特点。易迅软件工作室恭祝全国人民中秋快乐。特别提示：由于网站页面的不同设计，部分后台功能未在前端进行体现。系统特点：1、采用目前流行的PHP语言编写，底层采用超轻量级框架作为系统支撑；2、页面布局使用DIV+CSS技术，遵循WEB标准，及大提高页面的浏览速度；3、使用应
Logo标题内容很长会自动压缩这里
关键点：
• 左侧 div 设置 flex-shrink: 0，确保不被压缩• 右侧未设置，使用默认值 1，空间不足时自动缩小
注意点
flex-shrink 只在容器空间不足以容纳所有项目时起作用。如果容器很宽，项目不会主动缩小。
同时，项目必须有明确的尺寸（如 width、min-width），否则浏览器难以计算收缩量。
搭配 flex-basis 或 width 使用效果更可控。
基本上就这些。合理使用 flex-shrink，能让弹性布局在不同屏幕下更自然地调整。不复杂但容易忽略细节。
