flex-shrink默认值为1，控制子元素空间不足时的收缩权重；需配合overflow-wrap: break-word等换行属性及清除white-space: nowrap才能生效，设0可禁止收缩。
当 Flex 容器中的子元素内容过长（比如长文本、长 URL、未换行的英文单词），超出容器宽度时，会撑开父容器或溢出显示——这通常不是我们想要的效果。解决核心在于：让子元素在空间不足时主动收缩，而不是默认撑开或溢出。关键属性是 flex-shrink，它控制子元素是否以及如何缩小。
flex-shrink 是什么？默认值是多少？
flex-shrink 是 flex 复合属性的一部分（对应 flex: grow shrink basis），决定该子元素在容器空间不足时的收缩权重。它的默认值是 1，意味着所有子元素默认都可收缩，且收缩“能力”相同（按比例压缩自身尺寸）。
但注意：仅设 flex-shrink: 1 不一定见效——如果子元素内部内容本身不可折行（如连续无空格字符串）、或设置了 white-space: nowrap，它仍可能拒绝缩小，导致溢出。
让文字内容正常换行收缩
要让 flex 子元素真正响应 flex-shrink 并显示完整内容，需配合文本换行控制：
立即学习“前端免费学习笔记（深入）”；
- 给子元素设置
overflow: hidden（可选，防止溢出可见） - 必须设置
word-break: break-word或overflow-wrap: break-word（推荐后者，语义更准确） - 确保没有
white-space: nowrap这类阻止换行的样式 - 对纯数字/长 URL，可加
word-break: break-all强制断字（慎用，影响可读性）
控制哪些子元素该收缩、哪些保持固定
通过调整 flex-shrink 值，可以精细化控制收缩行为：
- 想让某个子项完全不收缩？设
flex-shrink: 0（等价于flex: 0 0 auto） - 想让 A 区域比 B 区域多收缩 2 倍？设 A 的
flex-shrink: 2，B 的flex-shrink: 1 - 常用组合写法：
flex: 1 1 0（推荐）→ grow=1, shrink=1, basis=0，让子项基于内容最小宽度开始等比拉伸/收缩，避免因内容长短差异导致布局错乱
常见误操作与修复
以下情况即使写了 flex-shrink: 1 也无效：
- 父容器没设
display: flex或width/max-width→ 子项无“空间不足”的判定依据 - 子元素是
<img alt="css flex子元素内容溢出怎么办_使用flex shrink控制收缩" >且没设max-width: 100%→ 图片默认不收缩 - 子元素内嵌了
display: inline-block或浮动元素 → 破坏 flex 内部流式行为 - 用了
min-width限制过死（如min-width: 200px）→ 即使空间不够也不许缩到 200px 以下
