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...

[@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

[@cherie4665]

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

[@SpeaksYourWord]

It's just because css is the shittiest language ever made so it makes sense.

[@kopilkaiser8991]

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

[@mjylove2]

you did really good job explaining the concept! 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.

[@nadeemkh100]

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

[@tomcat9761]

Thank you very much for the visualization. It really helped!

[@GoomusicLtd]

Thank you! Very well explained!

[@dhoneybeekingdom7889]

Fantastic! So easy to understand, thank you!

[@g0mezz]

thank youuuu! ive loved the way how you explained things

[@Yash-ry5wj]

Finally I understood it. Thank you ❤️

[@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

[@konradtomaszewski1677]

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

[@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!

[@umarmuzammil7332]

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

[@talibalasrar]

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

[@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 :)

[@adhilrumais5106]

Great explanations!

[@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!

[@romeiyu3491]

thank you so much for this.

[@hplat-vku]

thank brooooo, u save me about flex css

[@arshguleria442]

Very simple and too the point explanation, thanks :)

[@naxo210]

Thanks mate, really well explained.

[@dimasbajuri]

Thanks mate

[@himankhorany1476]

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

[@hjz2000]

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

[@trietphan7771]

it's really helpful, thanks for your lesson

[@otakuprofessor1022]

Good tutorial!

[@Karthik22ng]

This is the best explanation on flex box.

[@lindag5733]

This is awesome! Thank you!

[@alivtech3215]

Fantastic One!! really appreciate your explanation.

[@robertsheppard9297]

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

[@markanthonyponce9484]

Thanks Sir! Great explanation!

[@ilseyanes9686]

Excellent explanation!

[@ravichaudhary10]

Very well explained. Thank you.

[@osmankhalid2005]

Thank you. Best tutorial on the planet.

[@xx_kyon]

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

[@bama2619]

Amazing explanation.) Thank you.

[@halcyon__r3289]

U re good at getting my focus

[@arseneawounou180]

Best explanation ever !

[@joecok]

Great work. Thank you so much

[@agx111]

Very nicely explained 😃

[@josephkamande3219]

Good explanation. Thank you so much

[@kranthikumar5215]

Really amazing explanation ❤

[@CephalonShohan]

very good explaination. apreciate it

[@cryptobrarry]

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

[@LamNguyen-jp5vh]

Thank you!

[@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

[@Pavankumar-wq2fp]

really a great tutorial

[@JStone25]

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

[@costagmc1]

best!! thanks

[@chocomuslim3074]

Thanks a- lot!

[@jennybennyglitter]

Thank u ❤

[@toonice555]

Excellent

[@Victor-Ike]

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

[@VinayakSoni98]

Thanks

[@levyjr6857]

good explanation

[@hamzaramay3385]

thanks sir

[@sayuridonomai]

thank you so much ;-;

[@muhammadwaqar6912]

Awesome

[@noahpedraza2659]

Wonderful

[@hicee]

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

[@yvng4697]

it works like a width right?

[@sonnyl2915]

Thx

[@amrholo4445]

thanks, sir

[@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

[@cortespoliglota]

Thank

[@dontEatAnimals]

I love you 💟

[@Suboku]

merci

[@coldpizza2453]

❤

[@nested9301]

name of the instructor?

[@yvng4697]

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

[@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.

[@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