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

Опубликовано: 07 Ноябрь 2021
на канале: 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 ...

На этой странице сайта вы можете посмотреть видео онлайн CSS Flex Shrink (flex-shrink) Explained - Beginner Flexbox Tutorial длительностью часов минут секунд в хорошем качестве, которое загрузил пользователь Front End Beginners 07 Ноябрь 2021, поделитесь ссылкой с друзьями и знакомыми, на youtube это видео уже посмотрели 688 раз и оно понравилось 24 зрителям. Приятного просмотра!

15,872

128