CSS Flex Grow (flex-grow) Explained - Beginner Flexbox Tutorial
In this tutorial, we look at how to use the "flex-grow" property in CSS Flexbox.
"flex-grow" allows us to increase the size of one or more flex items so that they fill any "positive free space" inside their parent flex container.
Different items can be increased by different amounts, depending on the flex-grow value we provide.
flex-grow works together with flex-basis, so we'll touch on that topic briefly too.
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 Understanding "positive free space"
00:59 What is "flex-grow"?
01:59 Increasing the size of a single flex item
03:39 How do flex-grow values work?
04:33 Increasing the size of multiple flex items
06:02 Using different flex-grow values on individual flex items
08:39 "flex-grow" and "flex-basis" - Working with different flex item widths
11:14 "flex-grow" and "flex-direction"
12:00 Summary
WATCH NEXT:
• CSS Flex Basis (flex-basis) Explained - • CSS Flex Basis (flex-basis) Explained...
• How to Use Flex Direction (flex-direction) - • CSS Flex Direction (flex-direction) E...
• How to Perfectly Center an Element using CSS Flexbox - • How to Perfectly Center an Element Us...
Nesta página do site você pode assistir ao vídeo on-line CSS Flex Grow (flex-grow) Explained - Beginner Flexbox Tutorial duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário Front End Beginners 25 Outubro 2021, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 710 vezes e gostou 28 espectadores. Boa visualização!
