Skip to content

flex-shrink

定义了项目的缩小比例

css
.item {
    flex-shrink: <number>;
}

默认值: 1,即如果空间不足,该项目将缩小,负值对该属性无效

image-20240508141818483

这里可以看出,虽然每个项目都设置了宽度为 50px,但是由于自身容器宽度只有 200px,这时候每个项目会被同比例进行缩小,因为默认值为 1。

同理可得:

如果所有项目的 flex-shrink 属性都为 1,当空间不足时,都将等比例缩小。

如果一个项目的 flex-shrink 属性为 0,其他项目都为 1,则空间不足时,前者不缩小。