CSS flex-shrink property

The CSS flex-shrink property specifies how much an item will shrink than the other items of the container. It sets the flex shrink factor (a number that determines how much the flex item will shrink) of a flex-item.

We can distribute the negative space among the flex-items such that some of the items take up more negative space than others. It can be done by setting the value of flex-shrink property to 2. So, the flex-item with the flex-shrink: 2; will shrink twice than the flex-shrink: 1; i.e., it takes up twice as much negative space than others. The higher the flex-shrink value causes the item to shrink more than the others.

When distributing the negative space, the flex shrink factor is multiplied with the flex-basis. The flex-basis is the initial size of the item.

It only works on the flex-items, so if the item in the container is not a flex-item, the flex-shrink property will not affect the corresponding item. Generally, this CSS property is used with the other flex properties that are flex-grow and flex-basis and usually defined by the flex shorthand to ensure that all values are set.

Syntax

Values

number: It is the positive number that determines the flex shrink factor. Its default value is 1, which indicates that items don't shrink by default. It does not allow negative value. This value specifies how much the item will shrink compared to the other flexible items.

initial: It sets this property to its default value.

inherit: It inherits this property from its parent element.

Example

In this example, there are two containers, each having five flex-items. The width and height of the containers are 400px and 100px.

In the first container, we apply the flex-shrink: 5; to the third item, flex-shrink: initial; to the fourth item, and flex-shrink: inherit; to the fifth item.

In the second container, we apply the flex-shrink: 8; to the second item, flex-shrink: 10; to the third item, and flex-shrink: 6; to the fourth item.

Output

Let's see another example of a flex-shrink property.

Example

In this example, there is a container, having five flex-items. The width and height of the container are 400px and 100px. We apply the flex-shrink property to two of the items that will take up the more negative space than the others. The value of the flex-basis for the flex-items is 150px.

Output