CSS flex-shrink 属性

CSS flex-shrink 属性指定了容器内的一个项目比其他项目收缩的程度。它设置了一个 flex-item 的 flex 收缩因子（一个决定 flex 项目收缩多少的数字）。

我们可以将负空间分配给 flex-items，使得一些项目比其他项目占据更多的负空间。这可以通过将 flex-shrink 属性的值设置为 2 来实现。因此，具有 flex-shrink: 2; 的 flex-item 将比 flex-shrink: 1; 收缩两倍，即它占据的负空间是其他项目的两倍。flex-shrink 值越高，项目收缩的程度越大。

在分配负空间时，flex 收缩因子会乘以 flex-basis。flex-basis 是项目的初始尺寸。

它只对 flex-items 生效，所以如果容器中的项目不是 flex-item，flex-shrink 属性将不会影响相应的项目。通常，这个 CSS 属性与其他 flex 属性 flex-grow 和 flex-basis 一起使用，并且通常由 flex 简写属性定义，以确保所有值都被设置。

语法

值

数字： 这是一个正数，决定了 flex 收缩因子。其默认值为 1，表示项目默认不收缩。它不允许负值。该值指定了项目相对于其他灵活项目的收缩程度。

initial： 它将此属性设置为其默认值。

inherit： 它从其父元素继承此属性。

示例

在这个例子中，有两个容器，每个容器包含五个 flex-items。容器的 宽度 和 高度 分别是 400px 和 100px。

在第一个容器中，我们将第三个项目的 flex-shrink 设置为 5，第四个项目设置为 flex-shrink: initial;，第五个项目设置为 flex-shrink: inherit;。

在第二个容器中，我们将第二个项目的 flex-shrink 设置为 8，第三个项目设置为 flex-shrink: 10;，第四个项目设置为 flex-shrink: 6;。

输出

让我们看另一个 flex-shrink 属性的例子。

示例

在这个例子中，有一个容器，包含五个 flex-items。容器的 宽度 和 高度 分别是 400px 和 100px。我们将 flex-shrink 属性应用于其中两个项目，它们将占据比其他项目更多的负空间。flex-items 的 flex-basis 值为 150px。

输出