CSS flex-shrink 属性

CSS flex-shrink 属性指定了如果空间不足时，弹性容器中的项目应该缩小的量。该属性仅在弹性容器中使用，可以为每个项目指定不同的值。

语法

flex-shrink: <number>

• <number>: 数字值，表示项目的缩小比例。默认为1。

值的解释

• <number> 是一个数字，表示项目缩小的比例。
• 默认情况下，所有项目的缩小比例都是1。即当弹性容器中空间不足以容纳所有项目时，每个项目都将按照其原始尺寸缩小同样的比例。
• 如果一个项目的缩小比例是2，而其他项目的缩小比例都是1，则空间不足时这个项目的尺寸将缩小得更多。

实例

HTML：

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

CSS：

.container {
  display: flex;
}

.item1 {
  flex-shrink: 1;
}

.item2 {
  flex-shrink: 2;
}

.item3 {
  flex-shrink: 3;
}

在这个例子中，三个项目都被放置在弹性容器中。item1 的缩小比例是1，item2 的缩小比例是2，item3 的缩小比例是3。当弹性容器不足以容纳所有项目时，item3 将首先缩小，而item2 将比 item1 缩小得更多。

注意事项

• 如果所有项目的 flex-shrink 值都为0，则它们不会缩小。
• flex-shrink 的值是一个相对的量，表示每个项目尝试缩小的相对比例。实际的缩小比率取决于所有项目的 flex-shrink 值和它们初始大小的比率。
• flex-shrink 是与 flex-basis 和 flex-grow 一起使用的，它们三个共同决定了弹性项目的大小、位置和行为。
• 当空间不足时，具有 flex-shrink 值的项目被优先缩小，直到它们达到了它们的 min-width 或 flex-basis 属性指定的最小值。

总结

CSS 的 flex-shrink 属性用于指定弹性容器中每个项目的缩小比例。默认情况下，每个项目的缩小比列都是1，表示它们应该按照它们的原始尺寸缩小。使用不同的 value 值可以改变项目的缩小比例，影响弹性容器的行为。