flex-shrink

flex-shrink 属性指定弹性收缩因子，该因子决定当分配负空闲空间时，弹性项目相对于弹性容器中其他弹性项目的收缩程度。

此属性处理浏览器计算弹性项目 flex-basis 值并发现它们太大而无法放入弹性容器的情况。只要 flex-shrink 具有正值，项目就会收缩以避免溢出容器。

flex-grow 属性处理按比例分配可用的正空闲空间，比例与每个项目的 flex grow 因子成正比，并且仅考虑 flex-grow 属性的值。flex-shrink 属性管理删除负空闲空间以使盒子适合其容器而不溢出。删除空间比添加空间稍微复杂一些。弹性收缩因子乘以弹性基准大小；这会根据项目可以收缩的程度按比例分配负空间。这可以防止较小的项目在较大的项目明显减小之前收缩到 0px。

通常，flex-shrink 与 flex-grow 和 flex-basis 属性一起使用。在 flex 简写中，收缩因子始终是第二个 <number>。如果简写仅包含一个数字值，则该值假定为 flex-grow 值。

flex-shrink 属性指定为单个 <number>。

<number>

参见 <number>。负值无效。默认为 1。

flex-shrink = 
  <number [0,∞]>  

此示例演示了如何根据项目的收缩因子分配负空闲空间。它包括五个弹性项目，其 flex-shrink 值大于 0，这些项目的组合宽度大于其父弹性容器的宽度。

HTML

<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box4" style="background-color:lightsalmon;">D</div>
  <div class="box5" style="background-color:lightgreen;">E</div>
</div>

CSS

我们为每个弹性项目提供一个 width 值 200px。由于 flex-basis 属性默认为 auto，因此每个项目的 flex-basis 为 200px。这使得弹性项目的总宽度为 1000px，是容器大小的两倍。我们将所有弹性项目设置为可收缩，flex-shrink 值大于 0。最后两个项目的 flex-shrink 值设置得更大，因此它们将收缩得更多。

#content {
  display: flex;
  width: 500px;
}

#content div {
  width: 200px;
}

.box {
  flex-shrink: 1;
}

.box4 {
  flex-shrink: 1.5;
}

.box5 {
  flex-shrink: 2;
}

#content {
  margin: 5px;
}
div {
  font-family: monospace;
  outline: 1px solid;
  line-height: 4em;
  text-align: center;
}

结果

弹性项目不会溢出其容器，因为它们能够收缩：500px 的负空闲空间根据其 flex-shrink 值在五个项目之间分配。前三个项目的 flex-shrink: 1 设置。D 的 flex-shrink: 1.5 和 E 的 flex-shrink: 2 设置。D 和 E 的最终宽度小于其他项目，其中 E 小于 D。

• Flexbox 的基本概念
• 控制弹性项目沿主轴的比例
• CSS 弹性盒布局 模块