Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
community creator
html
shrink
flex

What is the CSS flex-shrink property?

Behzad Ahmad

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

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.

RELATED TAGS

css
community creator
html
shrink
flex

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring