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...
On this page of the site you can watch the video online CSS Flex Grow (flex-grow) Explained - Beginner Flexbox Tutorial with a duration of hours minute second in good quality, which was uploaded by the user Front End Beginners 25 October 2021, share the link with friends and acquaintances, this video has already been watched 710 times on youtube and it was liked by 28 viewers. Enjoy your viewing!
