flex-shrink是控制flex项目在空间不足时收缩比例的属性，默认值为1，表示等比缩小；设为0则不收缩。它适用于弹性盒子子元素，常用于避免文本溢出、固定侧边栏+自适应主内容等场景。例如导航栏中左侧logo区设flex-shrink:0保持原尺寸，右侧标题文字默认可缩，确保布局不被撑开。该属性仅在容器空间不足时生效，需配合width或flex-basis使用以更好控制收缩行为。合理设置能让响应式布局更自然。
flex-shrink 控制 flex 项目在容器空间不足时是否“收缩”，避免溢出。它适用于弹性盒子（display: flex）中的子元素，是实现响应式布局的重要属性之一。
flex-shrink 是一个数字，表示项目相对于其他项目的收缩比例。默认值为 1，意味着所有项目在空间不够时等比缩小。设为 0 时，该项目不收缩，保持原有尺寸。
浏览器根据每个项目的 flex-shrink 系数 × 原始尺寸 来决定谁缩得多、谁缩得少。
下面几种情况中，flex-shrink 能有效控制布局表现：
立即学习“前端免费学习笔记（深入）”；
• 避免文本内容溢出：当一行中有图标和文字，希望文字自动换行或压缩，而图标保持大小假设有一个导航栏，左侧是固定宽度的 logo 区，右侧是标题文字：
<div style="display: flex; width: 300px; border: 1px solid #ccc; margin: 10px 0;"> <div style="width: 80px; background: lightblue; flex-shrink: 0;">Logo</div> <div style="flex-shrink: 1; background: lightcoral;">标题内容很长会自动压缩这里</div> </div>
关键点：
• 左侧 div 设置 flex-shrink: 0，确保不被压缩flex-shrink 只在容器空间不足以容纳所有项目时起作用。如果容器很宽，项目不会主动缩小。
同时，项目必须有明确的尺寸（如 width、min-width），否则浏览器难以计算收缩量。
搭配 flex-basis 或 width 使用效果更可控。
基本上就这些。合理使用 flex-shrink，能让弹性布局在不同屏幕下更自然地调整。不复杂但容易忽略细节。
以上就是css flex-shrink在布局中如何应用的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
435
收藏
