The **`flex-shrink`** property in #key# CSS: Cascading Style Sheets #key# 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

---
```css
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 #key# HTML: HyperText Markup Language #key# and CSS code to demonstrate the use of the `flex-shrink` property is as follows:

.container
{  
    width: 500px;  
    height: 150px;  
    padding: 10px;  
    display: flex;  
    background-color: rgb(155, 77, 211);  
}  
.flex-item 
{  
    background-color: rgb(46, 135, 250);  
    margin: 3px;  
    text-align: center;  
    font-size: 30px;  
    flex-basis: 150px;  
    flex-grow: 0;  
}  

codemirror

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. 

What is the CSS flex-shrink property?

Syntax

Property values

Code