CSS弹性收缩（flex-shrink）[编辑 | 编辑源代码]

CSS弹性收缩（flex-shrink）是CSS弹性盒布局（Flexbox）中的一个属性，用于控制弹性项目（flex item）在容器空间不足时如何收缩。它是弹性盒模型的核心属性之一，与flex-grow和flex-basis共同构成flex简写属性。

介绍[编辑 | 编辑源代码]

弹性收缩（flex-shrink）定义了当弹性容器（flex container）的空间不足以容纳所有弹性项目时，各项目如何按比例收缩。默认情况下，所有弹性项目的flex-shrink值为1，意味着它们会等比例收缩以适应容器。如果某个项目的flex-shrink值为0，则该项目不会收缩。

弹性收缩的计算基于项目的初始大小（由flex-basis决定）和收缩因子（flex-shrink值）。收缩比例由以下公式决定：

$收缩比例 = \frac{flex-shrink \times flex-basis}{\sum (flex-shrink \times flex-basis)}$

语法[编辑 | 编辑源代码]

flex-shrink的语法如下：

flex-shrink: <number>; /* 默认值为1 */

其中，<number>必须为非负值（如0、1、2等）。

代码示例[编辑 | 编辑源代码]

基本示例[编辑 | 编辑源代码]

以下示例展示了三个弹性项目在容器空间不足时的收缩行为：

<div class="container">
  <div class="item item1">项目1</div>
  <div class="item item2">项目2</div>
  <div class="item item3">项目3</div>
</div>

.container {
  display: flex;
  width: 300px; /* 容器宽度不足以容纳所有项目 */
  border: 1px solid black;
}

.item {
  flex-basis: 150px;
  padding: 10px;
  border: 1px solid gray;
}

.item1 { flex-shrink: 1; }
.item2 { flex-shrink: 2; }
.item3 { flex-shrink: 0; } /* 不收缩 */

输出效果：

项目1和项目2会收缩，但项目2的收缩比例是项目1的两倍（因为flex-shrink: 2）。
项目3不会收缩（flex-shrink: 0）。

计算收缩比例[编辑 | 编辑源代码]

假设三个项目的flex-basis均为150px，容器的总宽度为300px，则： 1. 总空间不足： $150 \times 3 - 300 = 150 px$ 2. 收缩比例计算：

  * 项目1： $1 \times 150 = 150$ 
  * 项目2： $2 \times 150 = 300$ 
  * 项目3： $0 \times 150 = 0$ 
  * 总和： $150 + 300 + 0 = 450$

3. 实际收缩量：

  * 项目1： $150 \times \frac{150}{450} = 50 px$  → 最终宽度： $150 - 50 = 100 px$ 
  * 项目2： $150 \times \frac{300}{450} = 100 px$  → 最终宽度： $150 - 100 = 50 px$ 
  * 项目3：不收缩 → 最终宽度：150px

实际应用场景[编辑 | 编辑源代码]

响应式导航栏[编辑 | 编辑源代码]

在响应式设计中，导航栏的菜单项可能需要在小屏幕上收缩。以下是一个示例：

<nav class="navbar">
  <a href="#" class="nav-item">首页</a>
  <a href="#" class="nav-item">产品</a>
  <a href="#" class="nav-item">关于我们</a>
  <a href="#" class="nav-item nav-logo">LOGO</a>
  <a href="#" class="nav-item">联系</a>
</nav>

.navbar {
  display: flex;
  width: 100%;
  max-width: 800px;
}

.nav-item {
  flex-basis: 200px;
  flex-shrink: 1;
  padding: 10px;
  text-align: center;
}

.nav-logo {
  flex-shrink: 0; /* LOGO不收缩 */
}