CSS Flex Shrink (flex-shrink) Explained - Beginner Flexbox Tutorial
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 ...
In questa pagina del sito puoi guardare il video online CSS Flex Shrink (flex-shrink) Explained - Beginner Flexbox Tutorial della durata di ore minuti seconda in buona qualità , che l'utente ha caricato Front End Beginners 07 novembre 2021, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 688 volte e gli è piaciuto 24 spettatori. Buona visione!
