Flex grow, shrink, basis | CSS Flexbox tutorial

🎓 View our courses: scrimba.com/links/all-courses
The flex-grow, flex-shrink and flex-basis properties decide how the items grow and shrink with the width of the container.
Once you've learned CSS Flexbox, you'll wonder how you ever managed to build websites without it. It gives you all the tools you needed in order to properly arrange content inside flexible containers.
Given that all websites need to be flexible and responsive these days, Flexbox is a must-have skill for web developers.
💜 Play with this code on Scrimba: scrimba.com/learn/flexbox
💻 Check out Scrimba’s interactive learning platform:
scrimba.com/
🌲 Linktree:
scrimba.com/links/linktree
🤑GET AN EXTRA 10% OFF SCRIMBA PRO SUBSCRIPTION
Follow this link to claim your discount (expires Dec 1 2023)
scrimba.com/pricing?coupon=Yo...

[@cherie4665]

One of the best visualisations. People really shouldn't overcomplicate such a straightforward concept. Great video!

[@person81045]

Seen other videos where its basically someone using as many big words as possible to explain such a simple concept. This right here is actually TEACHING vs flexing on viewers (no pun intended)

[@jacksebbenunicyclist]

Dude, this was a life saver! First tutorial I've found that clearly explains it. THANK YOU

[@mjylove2]

you did really good job explaining the concept! thank you!

[@kopilkaiser8991]

Absolutely one of the best tutorial to cover properly and adequately this topic on yt.

[@dhoneybeekingdom7889]

Fantastic! So easy to understand, thank you!

[@estherinyang4779]

Half way in and I'm wooooowed! you are amazing at how you explain things so easily. Not a CSS beginner but I still came for this and you made it all easy to grasp, Thank you.

[@GoomusicLtd]

Thank you! Very well explained!

[@adhilrumais5106]

Great explanations!

[@definty]

Very rarely do I come across a CSS tutorial done better than Kyle or Kevin but your explanation make it much simpler than anyone else's I've seen so far!

[@LewisBenson-Codex]

It's funny that you mentioned these 2 channels by their first names, not their KZbin channels, and I knew exactly who you meant. I rely on them so much lol

[@definty]

@@LewisBenson-Codex haha they is the goats!

[@blacknwhite5451]

Thanks, really great and clear tutorial. Been a FE developer for many years, but never really took time to look into the details of flex grow and shrink. So now I know :)

[@umarmuzammil7332]

wow ...very explicit love these contents smoooth thanks a lot

[@nadeemkh100]

Finally, I was able to understand it. Thank you so much mate.

[@g0mezz]

thank youuuu! ive loved the way how you explained things

[@konradtomaszewski1677]

brilliant - exactly how I love to play to pick up technological nuances - thanks!

[@franciscosalazar8116]

Wow, I couldn't understand this, even when I read the docs it was so confusing, but you made it son easy to understand! Thanks so much!

[@otakuprofessor1022]

Good tutorial!

[@robertsheppard9297]

I checked 5 articles all all articles made it too hard to understand. Hats off to you! Amazing Explanation.. Thanks

[@talibalasrar]

best explanation in such a short time, my friend you are a hero.

[@Gorillawan]

Thanks for your lesson, this is the first explanation that help me understand the differernt between those elements.

[@romank1ng528]

Amazing! Very clear explanation, this was extremely helpful

[@hjz2000]

Lmao I've been searching for tons of videos on basis and you discussed it in such a simplistic way. Thank you sir.

[@Yash-ry5wj]

Finally I understood it. Thank you ❤️

[@dimasbajuri]

Thanks mate

[@arshguleria442]

Very simple and too the point explanation, thanks :)

[@naxo210]

Thanks mate, really well explained.

[@Karthik22ng]

This is the best explanation on flex box.

[@hplatcuaemday]

thank brooooo, u save me about flex css

[@alivtech3215]

Fantastic One!! really appreciate your explanation.

[@himankhorany1476]

you explain it very well, and it was easy to understand.

[@xx_kyon]

YOU ARE AN ANGEL THANK YOU HOPE YOU LIVE A HAPPY FULLFILLED LIFE

[@markanthonyponce9484]

Thanks Sir! Great explanation!

[@ilseyanes9686]

Excellent explanation!

[@ravichaudhary10]

Very well explained. Thank you.

[@trietphan7771]

it's really helpful, thanks for your lesson

[@lindag5733]

This is awesome! Thank you!

[@kranthikumar5215]

Really amazing explanation ❤

[@osmankhalid2005]

Thank you. Best tutorial on the planet.

[@halcyon__r3289]

U re good at getting my focus

[@bama2619]

Amazing explanation.) Thank you.

[@agx111]

Very nicely explained 😃

[@arseneawounou180]

Best explanation ever !

[@joecok]

Great work. Thank you so much

[@josephkamande3219]

Good explanation. Thank you so much

[@CephalonShohan]

very good explaination. apreciate it

[@Pavankumar-wq2fp]

really a great tutorial

[@haze2x]

I am trying to use a span tag to create a bottom border and am having trouble with getting it to appear. how should I do that

[@JStone25]

The best explanation, I don't know why it has 800 likes and 21 thousand views

[@LamNguyen-jp5vh]

Thank you!

[@levyjr6857]

good explanation

[@cryptobrarry]

if srink and grow is "1" what the seance to set basis?

[@hicee]

It is easy to understand. thank you. But you need to explain more about flex basis

[@yvng4697]

it works like a width right?

[@toonice555]

Excellent

[@costagmc1]

best!! thanks

[@Victor-Ike]

What about using flex with responsive units like %? Example flex: 33%

[@chocomuslim3074]

Thanks a- lot!

[@noahpedraza2659]

Wonderful

[@VinayakSoni98]

Thanks

[@jennybennyglitter]

Thank u ❤

[@satadhi]

why do we have to make css so diffucult man this is crazy; too much random information; sorry for the rant; btw thanks a lot for the explaination, you are doing god's work here

[@hamzaramay3385]

thanks sir

[@amrholo4445]

thanks, sir

[@sayuridonomai]

thank you so much ;-;

[@muhammadwaqar6912]

Awesome

[@dontEatAnimals]

I love you 💟

[@sonnyl2915]

Thx

[@cortespoliglota]

Thank

[@cfuman]

Thank you for the video but I think the default value for the flex - basis value is : auto

[@naxo210]

Yes, you are correct. Still this video is extremely helpful.

[@coldpizza2453]

❤

[@yvng4697]

Thanks!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@Suboku]

merci

[@nested9301]

name of the instructor?

[@borisrusev9474]

"... of the remaining space" not the whole space. Very important distinction. Having a flew-grow: 1000 doesn't mean it will grow 1000 times faster, only what portion of the REMAINING space will be added to the width.

[@doniaelfouly4142]

Thanks