flex-shrink

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 2015 年 9 月以来，该特性已在各大浏览器中可用。

flex-shrink CSS 属性设置弹性项目的收缩因子。如果所有弹性项目的大小总和大于弹性容器，那么弹性项目会根据其 flex-shrink 值进行收缩以适应容器。每条弹性线的负自由空间会分配给该线中 flex-shrink 值大于 0 的弹性项目。

注意：建议使用带有关键字值（如 auto 或 initial）的 flex 简写属性，而不是单独设置 flex-basis。关键字值会扩展为 flex-grow、flex-shrink 和 flex-basis 的可靠组合，这有助于实现通常期望的弹性行为。

试一试

flex-shrink: 0;

flex-shrink: 1;

flex-shrink: 2;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">I shrink</div>
  <div>Item Two</div>
  <div>Item Three</div>
</section>

.default-example {
  border: 1px solid #c5c5c5;
  width: auto;
  max-height: 300px;
  display: flex;
}

.default-example > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 300px;
}

语法

css

/* <number> values */
flex-shrink: 2;
flex-shrink: 0.6;

/* Global values */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: revert;
flex-shrink: revert-layer;
flex-shrink: unset;

描述

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

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

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

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

值

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

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

正式定义

初始值	`1`
应用于	弹性项目，包括在流中的伪元素
继承性	否
计算值	同指定值
动画类型	一个 number

正式语法

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

示例

设置弹性项目收缩因子

此示例演示了负自由空间如何根据项目的收缩因子进行分配。它包括五个 flex-shrink 值大于 0 的弹性项目，它们的总宽度大于其父弹性容器的宽度。

HTML

html

<div id="content">
  <div class="box1">A</div>
  <div class="box2">B</div>
  <div class="box3">C</div>
  <div class="box4">D</div>
  <div class="box5">E</div>
</div>

CSS

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

css

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

#content div {
  width: 200px;
}

.box1,
.box2,
.box3 {
  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;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: lightblue;
}
.box3 {
  background-color: yellow;
}
.box4 {
  background-color: lightsalmon;
}
.box5 {
  background-color: lightgreen;
}

结果

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

规范

规范
CSS 弹性盒子布局模块第 1 级 # flex-shrink-property

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者在 2025 年 7 月 14 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题