The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.
In use, flex-shrink is used alongside the other flex properties flex-grow and flex-basis, and normally defined using the flex shorthand.
Create New Project
First open your code editor and create new project named FlexShrink. Next, create new file named flex-shrink.html.
In the file we need to make container and the contents. If you use vs code you can make it with shortcode like this.
Hit the enter button and the code will be created.
Here’s the basic code
The output will be like this
Shrink code and Explanation
First, styling shrink class, give it width 500px and flex-shrink 1.
Output:
Then, change the width of the content larger than the container
Output:
As you can see on the output above, the shrink become smaller. it’s because shrink item shrink to fit according to flex-shrink. But if you change the value of flex-shrink to 0, the shrink box will become larger than content box.
It’s happened because flex-shrink 0 mean no shrink so the shrink box wouldn’t shrink and total the contents width is 600px while total the container is 500px, so content 2 and 3 become smaller to fit to the container width.
Flex shrink is a CSS property that have an ability to make flex items shrink to fit according to flex-shrink.
Well done! You have learned about Flex Shrink. You can Improve your skill by practice more. see you in the next article