Flex grow, shrink, basis | CSS Flexbox tutorial

🎓 View our courses: scrimba.com/li...
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/le...
💻 Check out Scrimba’s interactive learning platform:
scrimba.com/
🌲 Linktree:
scrimba.com/li...
🤑GET AN EXTRA 10% OFF SCRIMBA PRO SUBSCRIPTION
Follow this link to claim your discount (expires Dec 1 2023)
scrimba.com/pr...

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

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

[@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 UA-cam channels, and I knew exactly who you meant. I rely on them so much lol

[@definty]

@@LewisBenson-Codex haha they is the goats!

[@kopilkaiser8991]

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

[@stellanwae5050]

Ah! I love Scrimba. Great video, you made it so simple!

[@mjylove2]

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

[@GoomusicLtd]

Thank you! Very well explained!

[@robertsheppard9297]

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

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

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

[@hjz2000]

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

[@tomcat9761]

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

[@dhoneybeekingdom7889]

Fantastic! So easy to understand, thank you!

[@Gorillawan]

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

[@talibalasrar]

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

[@umarmuzammil7332]

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

[@venkateshchintapalli2360]

One of the great explaination. Thank you brother 👌👌

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

[@leonelcenteno3816]

Very clear explanation.

[@nadeemkh100]

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

[@anime_gen875]

you got a new sub ♥

[@g0mezz]

thank youuuu! ive loved the way how you explained things

[@Karthik22ng]

This is the best explanation on flex box.

[@adhilrumais5106]

Great explanations!

[@otakuprofessor1022]

Good tutorial!

[@xx_kyon]

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

[@konradtomaszewski1677]

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

[@Yash-ry5wj]

Finally I understood it.
Thank you ❤️

[@hplat-vku]

thank brooooo, u save me about flex css

[@dimasbajuri]

Thanks mate

[@romank1ng528]

Amazing! Very clear explanation, this was extremely helpful

[@romeiyu3491]

thank you so much for this.

[@osmankhalid2005]

Thank you. Best tutorial on the planet.

[@halcyon__r3289]

U re good at getting my focus

[@ilseyanes9686]

Excellent explanation!

[@markanthonyponce9484]

Thanks Sir! Great explanation!

[@himankhorany1476]

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

[@arshguleria442]

Very simple and too the point explanation, thanks :)

[@hicee]

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

[@yvng4697]

it works like a width right?

[@agx111]

Very nicely explained 😃

[@naxo210]

Thanks mate, really well explained.

[@bama2619]

Amazing explanation.) Thank you.

[@alivtech3215]

Fantastic One!! really appreciate your explanation.

[@akibahnaf-lu1sr]

thanks it helps

[@JStone25]

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

[@lindag5733]

This is awesome! Thank you!

[@ravichaudhary10]

Very well explained. Thank you.

[@kranthikumar5215]

Really amazing explanation ❤

[@trietphan7771]

it's really helpful, thanks for your lesson

[@joecok]

Great work. Thank you so much

[@josephkamande3219]

Good explanation. Thank you so much

[@CephalonShohan]

very good explaination. apreciate it

[@arseneawounou180]

Best explanation ever !

[@ARhaze2x]

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

[@cryptobrarry]

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

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

[@Victor-Ike]

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

[@LamNguyen-jp5vh]

Thank you!

[@Pavankumar-wq2fp]

really a great tutorial

[@levyjr6857]

good explanation

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

[@VinayakSoni98]

Thanks

[@toonice555]

Excellent

[@chocomuslim3074]

Thanks a- lot!

[@nested9301]

name of the instructor?

[@costagmc1]

best!! thanks

[@jennybennyglitter]

Thank u ❤

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

[@amrholo4445]

thanks, sir

[@hamzaramay3385]

thanks sir

[@sayuridonomai]

thank you so much ;-;

[@sonnyl2915]

Thx

[@cortespoliglota]

Thank

[@muhammadwaqar6912]

Awesome

[@yvng4697]

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

[@coldpizza2453]

❤

[@Suboku]

merci

[@dontEatAnimals]

I love you 💟

[@doniaelfouly4142]

Thanks

[@noahpedraza2659]

Wonderful