flex-shrink-*

在 CSS 中，`flex-shrink` 属性是一个用于设置弹性盒子元素缩放比例的属性，它允许我们在容器受到约束尺寸时调整子元素的大小。当一个弹性盒子容器内的空间不足以容纳所有的子元素时，`flex-shrink` 属性较高的元素会自动减少其尺寸，以便容器内的所有元素都能适应容器的空间。

`flex-shrink` 属性的值通常是一个正整数，数值越小表示该元素收缩的程度越大，在空间不足的情况下倾向于缩小更多。默认值是 1，意味着元素不会主动缩小（除非有其他元素的 `flex-shrink` 值更大）。

### 使用示例：

假设我们有一个包含三个 `<div>` 元素的弹性盒子容器，并希望当容器尺寸受限时，元素能够适当地缩小：

.container {
  display: flex;
}

.box {
  width: 50%;
  background-color: lightblue;
  padding: 20px;
  margin: 10px;
}

/* 定义每个 div 的 flex-shrink */
.box:first-child {
  flex-shrink: 1;
}

.box:nth-child(2) {
  flex-shrink: 2;
}

.box:last-child {
  flex-shrink: 3;
}

在这个例子中：
- 第一个元素 (`<div>` 元素) 的 `flex-shrink: 1;` 表示它与其他元素有相同的收缩倾向。
- 第二个元素的 `flex-shrink: 2;` 表示它比其他元素更容易收缩。
- 最后一个元素的 `flex-shrink: 3;` 表示它是最容易收缩的。

这使得当容器宽度不足以放置所有元素时，最易于收缩的元素（在这个例子中是最后一个元素）将会最先减少其尺寸，以此来保证容器内元素的布局尽可能地紧凑。

### 应用场景：

- 当我们需要创建自适应布局，特别是响应式网页设计时，`flex-shrink` 可以帮助元素在屏幕尺寸变化时调整大小，以填充容器。
- 在构建网格系统或其他需要元素按照一定规则自动调整大小以适应内容或设备的场景中非常有用。
- 为了优化视觉效果或避免元素间因尺寸差异而显得拥挤或空旷的情况，合理配置 `flex-shrink` 可以提供更好的用户界面体验。

总之，`flex-shrink` 是一个强大的工具，可以帮助开发者更好地控制弹性盒子布局下的元素大小，从而达到理想的视图效果并提升用户体验。