What is the CSS flex-shrink property?

The flex-shrink property in CSSCascading Style Sheets is used to define how much an item will shrink in comparison to other flex items present in the same container.

Note: There is no effect of this property on non-flexible items.

Syntax

flex-shrink: number|initial|inherit;

Property values

• Number: Its default value is 1. It’s used to specify how much the flex item will shrink.

• Initial: It sets the value to its default value.

• Inherit: It inherits the property from its parent value.

Code

The basic HTMLHyperText Markup Language and CSS code to demonstrate the use of the flex-shrink property is as follows:

In this example, we can see that we’ve made a table with five columns. We’ve set the value of the flex-shrink of column 1 as 3, and set the value of column 3 as 5.

We can see that when we increase the value of the flex-shrink, the width of the column decreases. You can also set the values according to your own choice.