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

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

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

[@tomcat9761]

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

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

[@dhoneybeekingdom7889]

Fantastic! So easy to understand, thank you!

[@hjz2000]

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

[@GoomusicLtd]

Thank you! Very well explained!

[@adhilrumais5106]

Great explanations!

[@g0mezz]

thank youuuu! ive loved the way how you explained things

[@umarmuzammil7332]

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

[@Karthik22ng]

This is the best explanation on flex box.

[@Gorillawan]

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

[@nadeemkh100]

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

[@konradtomaszewski1677]

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

[@romank1ng528]

Amazing! Very clear explanation, this was extremely helpful

[@otakuprofessor1022]

Good tutorial!

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

[@robertsheppard9297]

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

[@xx_kyon]

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

[@talibalasrar]

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

[@dimasbajuri]

Thanks mate

[@Yash-ry5wj]

Finally I understood it. Thank you ❤️

[@naxo210]

Thanks mate, really well explained.

[@hplatcuaemday]

thank brooooo, u save me about flex css

[@arshguleria442]

Very simple and too the point explanation, thanks :)

[@romeiyu3491]

thank you so much for this.

[@himankhorany1476]

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

[@alivtech3215]

Fantastic One!! really appreciate your explanation.

[@markanthonyponce9484]

Thanks Sir! Great explanation!

[@lindag5733]

This is awesome! Thank you!

[@ravichaudhary10]

Very well explained. Thank you.

[@ilseyanes9686]

Excellent explanation!

[@bama2619]

Amazing explanation.) Thank you.

[@trietphan7771]

it's really helpful, thanks for your lesson

[@halcyon__r3289]

U re good at getting my focus

[@agx111]

Very nicely explained 😃

[@osmankhalid2005]

Thank you. Best tutorial on the planet.

[@josephkamande3219]

Good explanation. Thank you so much

[@joecok]

Great work. Thank you so much

[@kranthikumar5215]

Really amazing explanation ❤

[@arseneawounou180]

Best explanation ever !

[@CephalonShohan]

very good explaination. apreciate it

[@JStone25]

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

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

[@cryptobrarry]

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

[@costagmc1]

best!! thanks

[@chocomuslim3074]

Thanks a- lot!

[@levyjr6857]

good explanation

[@toonice555]

Excellent

[@doniaelfouly4142]

Thanks

[@jennybennyglitter]

Thank u ❤

[@hicee]

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

[@yvng4697]

it works like a width right?

[@Victor-Ike]

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

[@hamzaramay3385]

thanks sir

[@sonnyl2915]

Thx

[@cortespoliglota]

Thank

[@noahpedraza2659]

Wonderful

[@muhammadwaqar6912]

Awesome

[@amrholo4445]

thanks, sir

[@sayuridonomai]

thank you so much ;-;

[@Suboku]

merci

[@dontEatAnimals]

I love you 💟

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

[@coldpizza2453]

❤

[@yvng4697]

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

[@nested9301]

name of the instructor?

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

[@VinayakSoni98]

Thanks