flex-shrink 是 CSS 中用于设置弹性项目（Flex Items）缩小比例的属性。它定义了项目在弹性容器中缺少空间时的缩小能力。

基本语法如下：
.flex-item {
  flex-shrink: value;
}

其中 value 是一个正整数，表示弹性项目的缩小比例。默认值为 1，表示项目会按照默认尺寸缩小。

以下是一些例子：

1. 所有项目缩小比例相同：
    .flex-item {
      flex-shrink: 1;
    }

    在这个例子中，所有弹性项目将按照相同的比例缩小以适应弹性容器的空间。

2. 某个项目缩小比例为 0，不缩小：
    .flex-item {
      flex-shrink: 1;
    }

    .flex-item-no-shrink {
      flex-shrink: 0;
    }

    在这个例子中，.flex-item-no-shrink 不会缩小，而其他项目会按照默认的比例进行缩小。

flex-shrink 属性通常与 flex-grow 和 flex-basis 一起使用，形成 flex 缩写属性，以完整地定义弹性项目在弹性容器中的行为。例如：
.flex-item {
  flex: 1 2 auto;
}

这表示项目在弹性容器中可以放大，缩小的比例是默认的两倍，且初始大小由内容决定。


转载请注明出处：http://www.zyzy.cn/article/detail/4185/CSS