CSS flex-shrink 属性（保姆级教程）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在现代网页开发中，CSS Flexbox 布局因其强大的灵活性和响应式特性，成为开发者构建复杂布局的首选方案。然而，许多开发者在使用 Flexbox 时，对某些细节属性的理解仍存在盲区。其中，flex-shrink 属性作为控制子元素收缩行为的核心参数，其作用机制和使用场景常常被低估。本文将通过循序渐进的方式，结合实例与代码演示，深入剖析 CSS flex-shrink 属性 的工作原理，并提供实用的开发技巧，帮助读者在实际项目中高效应用这一特性。

一、Flexbox 基础与 flex-shrink 的定位

在深入讲解 flex-shrink 之前，我们需要先回顾 Flexbox 的基本概念。Flexbox（弹性盒子模型）是一种一维布局模型，允许开发者通过 display: flex 将容器转换为弹性容器，从而更灵活地控制子元素的排列和空间分配。

Flexbox 的核心在于三个关键属性：

• flex-grow：定义子元素如何扩展以填充剩余空间
• flex-shrink：定义子元素在空间不足时如何收缩
• flex-basis：确定子元素的初始尺寸基准

这三个属性共同组成了 flex 简写属性（如 flex: 1）。其中，flex-shrink 的作用是决定当弹性容器的空间不足以容纳所有子元素时，这些元素是否应该收缩，以及收缩的优先级如何。

形象比喻：
可以将 Flex 容器想象成一个弹性十足的行李箱，而子元素则是装在箱内的物品。flex-shrink 就像调节行李箱内物品压缩程度的旋钮——当箱子空间不足时，某些物品（如衣物）会被优先压缩以适应空间，而其他物品（如硬质箱包）则可能保持原样。

二、flex-shrink 的核心概念详解

1. 属性值与默认行为

flex-shrink 接受一个非负数值，默认值为 1。其数值含义如下：

• flex-shrink: 0：禁止子元素收缩，即使容器空间不足也会保持原尺寸
• flex-shrink: 1（默认）：允许子元素按比例收缩
• flex-shrink: 2 或更高：收缩优先级更高，但需注意与其他属性的配合

注意：该属性仅在以下两个条件同时满足时生效：

1. 弹性容器的总空间不足以容纳所有子元素
2. 子元素的 flex-shrink 值大于 0

2. 收缩顺序的计算逻辑

当多个子元素同时需要收缩时，Flexbox 会根据以下公式计算每个元素的收缩量：
收缩量 = (flex-shrink 值) / (总 flex-shrink 值之和) × 需要缩减的总空间

例如，若两个子元素的 flex-shrink 分别为 1 和 2，则第二个元素的收缩量将是第一个的两倍。

案例演示：

.container {  
  display: flex;  
  width: 300px;  
}  
.child1 {  
  flex-shrink: 1;  
  width: 200px;  
}  
.child2 {  
  flex-shrink: 2;  
  width: 200px;  
}  

此时容器总宽度为 300px，而两个子元素初始总宽度为 400px，需缩减 100px。第二个子元素将承担 2/(1+2)=66.66% 的收缩量，即减少约 67px，而第一个子元素减少约 33px。

三、flex-shrink 与 flex-basis 的协同关系

flex-shrink 的实际效果与 flex-basis 密切相关，因为收缩量的计算基于子元素的 初始尺寸。

1. flex-basis 的作用

flex-basis 定义了子元素的初始宽度（水平主轴方向）或高度（垂直主轴方向）。其默认值为 auto，即继承元素的宽度或高度。当 flex-basis 显式设置为具体值（如 100px）时，收缩将基于该值进行。

2. 综合案例分析

.container {  
  display: flex;  
  width: 200px;  
}  
.child {  
  flex-shrink: 1;  
  flex-basis: 150px;  
}  

此时，两个子元素的总初始宽度为 300px，超过容器的 200px。每个子元素将按 flex-shrink:1 的比例收缩，最终宽度为：
150px - (100px × 1/2) = 100px

关键结论：

• 若 flex-basis 设置为 0，则 flex-grow 的扩展优先级将完全主导，而 flex-shrink 的收缩将基于 0 基准，这在某些场景下能实现更精准的布局控制

四、flex-shrink 在实际开发中的应用

1. 响应式布局中的元素收缩

在设计响应式导航栏时，当屏幕宽度不足时，某些菜单项可能需要优先收缩。通过设置 flex-shrink: 1，可以确保内容弹性适配。

<nav class="menu">  
  <div class="logo">Logo</div>  
  <div class="links">  
    <a href="#">Home</a>  
    <a href="#">About</a>  
    <a href="#">Contact</a>  
  </div>  
</nav>  

.menu {  
  display: flex;  
  justify-content: space-between;  
  padding: 20px;  
  background: #f0f0f0;  
}  
.links {  
  flex-shrink: 1;  
  display: flex;  
  gap: 15px;  
}  

在此案例中，.links 容器的收缩能力确保了当屏幕变窄时，菜单项会均匀缩减间距，而非直接溢出屏幕。

2. 图片与文字的弹性适配

在卡片式布局中，图片和文字区域可能需要根据容器宽度动态调整。通过设置 flex-shrink，可以避免图片被过度压缩影响体验。

.card {  
  display: flex;  
  gap: 15px;  
  max-width: 400px;  
}  
.image {  
  flex-shrink: 0;  /* 禁止图片收缩 */  
  width: 150px;  
}  
.content {  
  flex-shrink: 1;  /* 允许文字区域收缩 */  
}  

此配置下，图片始终维持原始尺寸，而文字区域将根据容器宽度灵活调整，保证视觉优先级。

五、常见问题与解决方案

1. 元素未按预期收缩

原因：

• flex-shrink 值设置为 0
• 父容器未设置明确尺寸（如 width 或 height）
• 其他属性（如 min-width）限制了收缩空间

解决方案：
检查上述条件，确保容器尺寸明确且子元素具备收缩权限。

2. 多元素收缩比例异常

原因：
子元素的 flex-basis 设置差异导致计算基准不同。

解决方案：
统一设置 flex-basis: 0 可使 flex-grow 和 flex-shrink 的比例计算更直观。

六、进阶技巧与最佳实践

1. 简写属性的高效使用

通过 flex 简写属性可同时设置三个扩展属性，例如：

.child {  
  flex: 1 2 100px;  /* grow | shrink | basis */  
}  

2. 动态调整收缩行为

结合媒体查询，可在不同屏幕尺寸下动态修改 flex-shrink 值：

@media (max-width: 768px) {  
  .element {  
    flex-shrink: 0;  /* 移动端禁止收缩 */  
  }  
}  

结论

通过本文的讲解，我们深入理解了 CSS flex-shrink 属性 在弹性布局中的核心作用。它不仅是空间不足时收缩行为的控制开关，更是实现复杂响应式设计的利器。开发者应结合 flex-grow、flex-basis 等属性，通过合理设置收缩优先级，构建出既美观又实用的布局结构。未来，随着项目复杂度的提升，熟练掌握这一属性将帮助开发者更高效地应对各种布局挑战。

提示：实践是掌握 Flexbox 的关键。建议读者通过在线代码编辑器（如 CodePen）尝试修改本文中的示例代码，观察不同 flex-shrink 值带来的布局变化，从而加深理解。