Finally understanding Flexbox flex-grow, flex-shrink and flex-basis! - Tutorial 11 of 20 💪 

Bro, you're better than the official documentation and all those lame tutorials combined! Great work!

Watching all other videos, I wondered why the width of one is not in proportion to the other. You made it so clear that the extra room is divided in that proportion. Awesome! Two questions: 1. What is flex-basis when flex:1 is used? 2. What is the difference between using width vs flex-basis on a flex item?

i have watched lots of youtube videos about flex-grow and shrink., i really didn't understand them properly after i watched this it's gave the clear concept about flex-grow and flex-shrink.Thank you very much Wes Bos

this video gave me more understanding of flex shorthand. Thank you

Great explanation! I now understand more about these properties, thank you! I gotta note that the intro is very loud and your voice is very low, but this video is 7 y o so might have changed.

You are a gem. The CSS tricks article dedicated to this topic failed me this time

I spent a lot of time reading the documentation, but eventually understood it in your ten minutes video! So incredible.

Thank You so much for the clear explanation

Man is for box, not the container! that's why it wasn't doing anything. Thanks Wes

This video was really helpful! Helped a lot! I was very confused when it comes to these three properties. Thanks a lot!!

Really, really well explained - thank you!

Your style of describing is super 🔥

way better explanation than codecademy

Thanks a lot, very clear explanation

thank you for the explanation.

Can you explain the math of why we use 1? What calculations are done for use to know which number to use and what it does for flex grow? Thank you.

Good tutorial. You can also enable the browser's responsive "toggle device toolbar" tool e.g. Chrome to resize the frame instead of resizing your entire browser window.

This is a beautiful explanation, Thank you!

Thank you that was really helpful

Thank you. You made it very clear!

Wes is the Boss

👍well explained, thanks :)

Thank you sir! I understand it now

great video!

explained it perfectly, thank you

Oh my god, this intro is soooo annoying. It is still a great tutorial.

Great tutorial!

Thank you sir. This was great.

great content!

you are awesome..

bro thaaank youuuuuuuuuuuuu ily

Hi Wes, can you please use fractions to express how much an element is giving away of its width when using flex-shrink? I think I don’t get it. You use flex-basis:400px for both .box1 and .box2. So, when the container is 800px wide, each box is 400px wide. Then you use flex-grow:10 for .box1 and flex-grow:1 for .box2. So, when the container gets wider than 800px the extra room will get split between the elements using the ratio we set for flex-grow. My understanding is that .box1 gets 10/11 of free space and .box2 gets 1/11. So yes, .box1 gets 10x more extra space than .box2. But how does this work with flex-shrink? We used the same values for flex-shrink as for flex-grow, but obviously .box1 is not giving away 10/11 of its width when the container gets below 800px. Thanks!

why is there bullshit like if you are in the 10th level div you can't set it to use the remaining space but need to put display flex on every level of div above it? Shouldn't immediate div be enough?

awesome tutorial!

Thanks bro

good explanation!

I love this explication

thanks

i actually really like the intro. it's so 90's!

Looks good You do a fair job of teaching this BUT what happens when I type in What you type in and IT STILL DOES NOTHING ?

Thanks!

subscibed!

u r brilliant

How do you apply 'wrapping' to force the second box onto the second row?

excelent!

What's the extension you are using for informing the screen dimensions? The ones I've found so far do not work if I'm working with a local file :(

Fire

ty

omg its 8 year ago

what if he started again making these intros in his new videos...that will be

❤❤

I think this is not completele well explained. Why? Because when you give flex-grow or flex-shrink to an element you do not make 'x' times bigger than the other one, you are just using 'THE AVAILABLE SPACE', and dividing it in many spaces as you have given to the summary of all the elements, and from this point the browser gives the size to every element according with the number of flex-grow o shrink that you gave to it every single element. (My english is not good enought sorry). Bless!

You explain very bad. Sorry.

Helpful, but you have to watch in 1.5x speed for it to almost feel like a normal speaking speed

Thankyou so much for such an easy explanation!!

You're an incredible teacher. Thank you

Very helpful. Thanks.

love your gentle voice bro ! thank you :)

excellent explanation~~

yah that’s it. subscribed!

Someone know what this means? I have no idea. "kind of look at your layout and intelligently figure out how big these other ones should be"

thanks for all the efort and love

Just play at 1.25x speed.

I had to refresh my memory about flexbox, and this video was great for that, thank you c;

thank you so much

Very good tutorial man ! These flex things was annoying me for hours

thank you!

this left earrape

Simple and informative, Thank you !

thanks :D

great job

Thanks for well explained.