CSS Flex Shrink (flex-shrink) Explained - Beginner Flexbox Tutorial

Published: 07 November 2021
on channel: Front End Beginners

688

In this tutorial, we look at the "flex-shrink" property in CSS Flexbox.

"flex-shrink" determines whether a child flex item is allowed to shrink—and by how much—to fit inside the parent flex container.

When flex-shrink is set to a positive number—such as the default value of 1—flex items are allowed to shrink.

If flex-shrink is set to 0, the flex item(s) is not allowed to shrink and will overflow the parent container if it is wide enough to do so.

flex-shrink values are proportional to one another, so if all items have the same value, all will shrink at the same rate. If one item has a value of 1 and another has a value of 2, the item with a value of 2 will shrink by twice as much as the first item.

I hope you found this video helpful. If you have any questions, please leave them in the comments below and I'll do my best to answer as soon as possible.

TIMESTAMPS:
00:00 Introduction
00:24 What is flex-shrink?
02:02 How does "flex-shrink: 0;" work?
02:46 Using different flex-shrink values
05:51 flex-shrink and the column direction
06:12 Summary

WATCH NEXT:
• CSS Flex Basis (flex-basis) Explained -    • CSS Flex Basis (flex-basis) Explained...
• CSS Flex Grow (flex-grow) Explained -    • CSS Flex Grow (flex-grow) Explained -...
• CSS Flex Wrap (flex-wrap) Explained -    • CSS Flex Wrap (flex-wrap) Explained -...
• How to Make One Flex Item Full-Width with CSS Flexbox -    • How to Make One Flex Item Full-Width ...

On this page of the site you can watch the video online CSS Flex Shrink (flex-shrink) Explained - Beginner Flexbox Tutorial with a duration of hours minute second in good quality, which was uploaded by the user Front End Beginners 07 November 2021, share the link with friends and acquaintances, this video has already been watched 688 times on youtube and it was liked by 24 viewers. Enjoy your viewing!

47,152