编辑“︁CSS弹性收缩（flex-shrink）”︁

= CSS弹性收缩（flex-shrink） =

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

== 介绍 ==

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

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

<math>
\text{收缩比例} = \frac{\text{flex-shrink} \times \text{flex-basis}}{\sum (\text{flex-shrink} \times \text{flex-basis})}
</math>

== 语法 ==

<code>flex-shrink</code>的语法如下：

<syntaxhighlight lang="css">
flex-shrink: <number>; /* 默认值为1 */
</syntaxhighlight>

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

== 代码示例 ==

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

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

<syntaxhighlight lang="css">
.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; } /* 不收缩 */
</syntaxhighlight>

'''输出效果：'''
* 项目1和项目2会收缩，但项目2的收缩比例是项目1的两倍（因为<code>flex-shrink: 2</code>）。
* 项目3不会收缩（<code>flex-shrink: 0</code>）。

=== 计算收缩比例 ===
假设三个项目的<code>flex-basis</code>均为150px，容器的总宽度为300px，则：
1. 总空间不足：<math>150 \times 3 - 300 = 150 \text{px}</math>
2. 收缩比例计算：
   * 项目1：<math>1 \times 150 = 150</math>
   * 项目2：<math>2 \times 150 = 300</math>
   * 项目3：<math>0 \times 150 = 0</math>
   * 总和：<math>150 + 300 + 0 = 450</math>
3. 实际收缩量：
   * 项目1：<math>150 \times \frac{150}{450} = 50 \text{px}</math> → 最终宽度：<math>150 - 50 = 100 \text{px}</math>
   * 项目2：<math>150 \times \frac{300}{450} = 100 \text{px}</math> → 最终宽度：<math>150 - 100 = 50 \text{px}</math>
   * 项目3：不收缩 → 最终宽度：150px

== 实际应用场景 ==

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

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

<syntaxhighlight lang="css">
.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不收缩 */
}
</syntaxhighlight>

'''效果：'''
* 在小屏幕上，普通导航项会收缩，但LOGO保持原始大小。

== 图表说明 ==

以下是一个弹性收缩的示意图：

<mermaid>
flowchart LR
  A[容器宽度: 300px] --> B[项目1: flex-shrink=1\n宽度=100px]
  A --> C[项目2: flex-shrink=2\n宽度=50px]
  A --> D[项目3: flex-shrink=0\n宽度=150px]
</mermaid>

== 注意事项 ==
1. <code>flex-shrink</code>仅在容器空间不足时生效。
2. 如果<code>flex-shrink</code>为0且项目总宽度超过容器宽度，可能会出现溢出。
3. 结合<code>flex-grow</code>和<code>flex-basis</code>使用，可以实现更灵活的布局。

== 总结 ==
<code>flex-shrink</code>是弹性盒布局中控制项目收缩行为的重要属性。通过调整收缩因子，可以精确控制项目在空间不足时的表现。理解其计算方式有助于实现复杂的响应式布局。

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS弹性盒布局]]