CSS | flex-shrink 属性

flex-shrink 属性用于指定弹性盒子项的收缩能力，它决定了当可用空间不足时，弹性盒子项是否能收缩以适应容器。

语法

flex-shrink: <number>;

• <number>：一个数字，表示弹性盒子项的收缩比例。默认值为 1。

值解释

• 如果所有的弹性盒子项的 flex-shrink 属性都为 1，且空间不足时，它们将等分剩余的空间。
• 如果一个弹性盒子项的 flex-shrink 属性为 0，而其他弹性盒子项为正数，则空间不足时，其他的弹性盒子项会收缩，这个项不会收缩。
• 如果一个弹性盒子项的 flex-shrink 属性为一个正数，它的值越大，收缩的比例就越大。

示例

.container {
  display: flex;
  width: 500px;
}

.item {
  flex-shrink: 1;
}

在上面的示例中，所有的弹性盒子项都设置了相同的 flex-shrink 属性值为 1。如果容器宽度只有 300px，而所有的弹性盒子项的宽度之和超过了 300px，它们将等比例地收缩以适应容器。

浏览器兼容性

flex-shrink 属性兼容大多数现代浏览器，包括 Chrome、Firefox、Safari 和 Edge。

相关属性

• flex-grow：弹性盒子项的放大能力。
• flex-basis：指定弹性盒子项的初始宽度。
• flex：flex-grow、flex-shrink 和 flex-basis 的复合属性。

参考链接

• MDN Web 文档：flex-shrink