CSS Flexbox Tutorial #3 - Flex Grow

Hey gang, in this CSS Flexbox tutorial, I'll show you how we can use the flex-grow property to allow our flex elements to grow into all of the space available to them. Flex grow is essentially the rate at which elements can grow in relation to their sibling flex elements.

----- COURSE LINKS:

---------------------------------------------------------------------------------------------
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage...

========== JavaScript for Beginners Playlist ==========

============ CSS for Beginners Playlist =============

============== The Net Ninja =====================

================== Social Links ==================

[oghenekparoboonokwakpor]

watched this in 2017 or thereabout as an industrial intern and here i am as a software engineer watching this again, we learn, unlearn, till it sticks with us, learning and personal development is infinite

[jasonharris]

Managed to explain flex-grow in minutes compared to some videos that go on for hours and completely over complicate the explanation. Top YouTuber 👌🏼

[Dmoniair]

This is exactly what I've been looking for to learn more on flexboxes! 8 years later and still super useful info, thank you!

[dondeleva]

You are an AWESOME teacher All of your tutorials are so easy to understand, Thank you :-)

[stephaniehendricks]

Love the bite-size episodes! so clean and concise. Thank you!

[ayushaggarwal]

Man, your intro is scary...just duped me everytime

[STUPIDYOUTUBE_HIDINGMSGS]

what's amazing with Shaun is the detailed explanation and illustration, cheers

[antchamberlin]

Seriously man, your tutorials are next level, really engaging and so concise, big thumbs up!

[phenomenia]

Thanks for the great video. Straight to the point. Now I understood the flex grow!

[nimishasharma]

I went back to the previous videos and liked them (bcoz I forgot to while watching them)! These videos are soo good and easy for beginners like me

[alirasheedmd]

I reduce the volume to 10 when ever I open your tutorial :D

[sschinychin]

Awesome video! Explains flex-grow very well

[lovdeepgahunia]

im taking web dev, my school is great but your vids are such big help when i get stuck. thank you friend and many blessings your way.

[RexGalilae]

That intro shout killed my grandmother.

On the bright side, I at least understand how flex grow works

[rostyslavklyba]

Here is another bunch of high-quality tutorials. Thanks!!!

[Gruximillian]

Hi Shaun, great tutorial, as usual!
I have one question though. It is clearly visible that the blue box is not three times wider than the green box. Is that because all boxes have minimum width of 100px, and then the rest of the space is distributed in the 2:3:1 ratio, meaning that the box grows, and added to that minimum width? What if we don't set mimimum width, will the width of the boxes have the ratio 2:3:1 then?

Thanks!

[TheAwesomejay]

your 12 column analogy helped a lot. thank you!

[venkatakalyan]

Nice Explanation about Flex Grow in CSS keep it up Man 👌

[DspycesRecords]

Your the beste teacher, the way you explaine things make easy to understand Thank you so much The Netninja✌️✌️

[marksamuel]

So basically, if you have three containers side by side and you want the middle box to be double the width of the left and right box, you just do: flex: 1, flex: 2, flex: 1. So 1 is the smallest, 2 is double that, 3 is triple that... etc This is really simple. I tried it with negative values also and it functions perfectly.