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