flex-shrink

flex-shrink 是 CSS 的一个属性，用于控制 flex 容器中的 flex 项目在空间不足时如何收缩。它是 flexbox 布局中最重要的三个属性之一，另外两个是 flex-grow 和 flex-basis。

flex-shrink 属性的取值可以是一个非负数字，默认为 1。这个数字表示了 flex 项目收缩的比例，越大则收缩得越多，越小则收缩得越少。如果所有的 flex 项目的 flex-shrink 属性都为 1，将会等比例地收缩，如果有一个项目的 flex-shrink 属性为 0，那么它将不会被收缩。

flex-shrink 属性的使用场景通常是当 flex 容器的空间不足以容纳所有的项目时，有些项目可以收缩以便保持整体的布局。例如，当浏览器窗口缩小时，一个包含了多个 flex 项目的容器可能会把其中的某个项目压缩起来，以便让其他项目有足够的空间来展示。

下面是一个使用 flex-shrink 属性的示例：

```html

```

在这个例子中，`.container` 是一个 flex 容器，它的宽度为 500px，高度为 200px。里面包含了三个 flex 项目，分别是 `Item 1`、`Item 2` 和 `Item 3`。它们的 flex 属性分别为 3、1 和 2，表示它们在空间分配时的比例。

由于容器的宽度只有 500px，而加起来三个项目的 flex 属性之和为 6，所以每个项目的实际宽度为 `flex/sum(flex) * container_width = (flex / 6) * 500px`。计算得出，`Item 1` 的宽度为 `3/6 * 500px = 250px`，`Item 2` 的宽度为 `1/6 * 500px = 83.33px`，`Item 3` 的宽度为 `2/6 * 500px = 166.67px`。

如果此时窗口的宽度缩小到只有 400px，根据 flex-shrink 属性的定义，每个项目的宽度将按照 `flex-shrink` 的比例进行收缩。根据以上示例中的 flex-shrink 为 1，`Item 1` 和 `Item 3` 将被收缩，而 `Item 2` 的宽度将保持不变。收缩后，`Item 1` 的宽度将变为 `250px - (250px*0.25) = 187.5px`，`Item 2` 的宽度仍然为 `83.33px`，`Item 3` 的宽度将变为 `166.67px - (166.67px*0.25) = 125px`。

综上所述，flex-shrink 属性允许我们在空间不足时，控制某些 flex 项目的收缩比例，以便保持整体的布局。通过合理地设置 flex-shrink 属性的值，我们可以实现自适应的布局效果，提高移动端网页的响应性和体验。