How Do Flex-Basis, Flex-Grow, Flex-Shrink Work? | CSS Flexbox

[@TheCodeCreative]

To subscribe to the channel: kzbin.info/door/mOpHGj4JRWCdXhllVTZCVw

[@faysalzoabi]

That is one of the best explanations on the internet. Amazing tutorial and great work. Thank you very much for your time.

[@TheCodeCreative]

Thanks for watching! 👍🏻

[@SameeraSenarathna]

one of the best explanations I found on internet on lex-Basis, Flex-Grow, Flex-Shrink properties. Thank you.

[@TheCodeCreative]

Glad it was helpful!

[@pratheekshenoy9327]

This is the best and easiest explanation of Flex-Basis, Flex-Grow and Flex-Shrink I've ever came across.🤩🤩

[@TheCodeCreative]

Thanks Pratheek! Please share it with others 👍🏻

[@pratheekshenoy9327]

@@TheCodeCreative Sir, please make a video on HTML semantic tags and please explain it in detail.

[@TheCodeCreative]

@@pratheekshenoy9327 That's a great idea for a video Pratheek, thanks for the suggestions!

[@chloehuang3554]

have long been confused about flex-basis. This video helps a looooot!!

[@TheCodeCreative]

Coooool Chloe!

[@tanvirmazaumder7053]

never found a video that much helpful ....Keep up the good work sir,,,,

[@TheCodeCreative]

Thanks for watching!

[@insPIreMath]

Absolutely fantabulous!!! ❤❤❤💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯💯🙌🙌👏👏👏👏👏👏👏👏👏👏💯💯💯💯💯💯💯💯

[@TheCodeCreative]

Glad it was helpful!

[@femiadeyemo9023]

One of the best explanation have seen so far

[@TheCodeCreative]

Glad it was helpful!

[@omaremad6347]

thx was really confused till watching this vid. It clarified a bit more than I knew about flexbox in general plus of course these three props

[@TheCodeCreative]

Glad to hear!

[@novanoskillz4151]

This is an amazing tutorial. Thank you. other tutorials only skimmed the surface which I'm sure i speak for many of us when i say we were left with more questions and even less understanding. this video made EVERYTHING clear... thank you!

[@TheCodeCreative]

Great comment! Glad it helped. Thanks for watching👍🏻

[@yofi2614]

One of the best explanation I have ever exposed to in the whole KZbin , slowly, precisely and right to the point! thank you very much! of course subscribed!

[@TheCodeCreative]

Thank you, glad it was helpful!

[@daletron303030]

great video this one had more details than some other ones I've watched.

[@TheCodeCreative]

Glad to hear! I have a full Flexbox playlist here if you're interested: kzbin.info/aero/PLMPgoZdlPume0VJ6QW5RLpTMs6ToSxjq9

[@OscarMartinez-nt6zn]

Great explanation! It filled the gaps, thanks so much for the effort.

[@TheCodeCreative]

Thanks Oscar, glad it helped!

[@6991Jon]

Very concisely explained. Good job.

[@TheCodeCreative]

Great, thanks for watching!

[@musaddiqali1]

Thanks. I was very confused on this topic until I watched your video. You explain really well. Good for beginners like me.

[@TheCodeCreative]

That's great to hear! Thanks for watching!

[@jjnngguuyyeenn]

holy **** this is some pro level explaination!

[@TheCodeCreative]

Thanks for checking it out!

[@subhashgn1775]

Absolute masterclass... Very well explained.

[@TheCodeCreative]

Great, thanks for watching!

[@mohamedyoussef8835]

Finally, I understand flex completely +++++++++++++++++++

[@TheCodeCreative]

Great!

[@reallygoodstuff4441]

Best video of css in my life🔥

[@TheCodeCreative]

😀

[@Miodrag0204]

Awesome! Thanks for sharing your knowledge!

[@TheCodeCreative]

Glad it was helpful!

[@eumm11]

Brilliant explanation, thank you!

[@TheCodeCreative]

Glad it was helpful!

[@caerulemusic]

You're a fantastic teacher. Thanks so much for the clear explanations. Subscribed and will be checking out your other stuff too

[@TheCodeCreative]

Awesome, thank you!

[@christianllungo4720]

Thank you. That was a clear explanation.

[@TheCodeCreative]

Great, glad to hear that Christian! What other topics would you be interested in seeing?

[@amjadomar2396]

Finally I understood flex-basis YEAAAH

[@TheCodeCreative]

Great! 👍🏻

[@SarthakGamer]

very well explained.

[@TheCodeCreative]

Thanks for watching Sarthak!

[@mildernavarro865]

Really good explanation Thanks!

[@TheCodeCreative]

Glad it was helpful!

[@jules7787]

Thank you! You explained this really well!

[@TheCodeCreative]

Great! Thanks for watching!

[@rammaheshwari9748]

Great Explanation

[@TheCodeCreative]

Thanks!

[@mohamedyoussef8835]

Awesome tutorial +++++ thank you 🙂🙂

[@TheCodeCreative]

🗣JOIN the Code Creative Facebook group! : facebook.com/groups/1612600368887577

[@temisegun8631]

really enjoyed this. well explained. thanks for sharing :D

[@TheCodeCreative]

Thanks Temi, glad to hear!

[@dannylake1968]

Flex basis always used to confuse me especially how it related to width and height of the child items... not anymore!

[@TheCodeCreative]

Flex-basis is definitely the one that seems to cause the most confusion. Glad it helped!

[@TheCodeCreative]

📖 Download my FREE "Google Search Secrets for Developers" Cheat Sheet: store.thecodecreative.com/google-secrets-cheat-sheet

[@manuelguerrero9917]

You are amazing man.

[@TheCodeCreative]

I appreciate it. Thanks for watching!

[@richardmarks2957]

Thanks for a great explanation. On a couple of occasions you conjured up a measuring device to measure sizes on screen. Could you explain how you did that please, it looks really useful.

[@TheCodeCreative]

Thanks Richard! I'm not exactly sure which measuring device you're referring to but, if you're on a Mac, it could be Command + Shift + 4.

[@emmanuelojuba2494]

Thank you for a very good video! Please what tool did you use to measure pixel sizes on your browser?

[@TheCodeCreative]

It's built into the Mac. Shift + Command + 4 will allow you to see those measurements. Thanks for watching Emmanuel!

[@vougedeals3978]

great explanation!

[@TheCodeCreative]

Thanks!

[@ChristianMay21]

What a detailed but concise explanation! Thanks so much for the video.

[@TheCodeCreative]

Hi Christian, thanks for the comment and for watching!

[@originunknown4273]

Great content. Thanks.

[@TheCodeCreative]

Thanks for watching!

[@ignaciodelamadrid]

Yo! You have great teaching skills! This is by far the best explanation I've watched about these flex properties. Can I be a little bit an ass and suggest that you add the shortcut for the three props: `flex: [flex-grow] [flex-shrink] [flex-basis]`? There are a lot of code bases using this obscure shortcut and I had to read the MDN docs to understand it. Anyway, kudos on this video!

[@TheCodeCreative]

Thanks Ignacio! That's a good suggestion to add the shortcuts. Maybe I'll do a separate video actually on flex shortcuts. Thanks for watching 👍🏻

[@arunkaiser]

Great dude

[@TheCodeCreative]

Thanks Arun!

[@hughluo8494]

Thanks a lot !

[@TheCodeCreative]

Your welcome, thanks for watching!

[@3042640426]

u r amazing !! Thank you so muchhhhh~

[@TheCodeCreative]

Thanks for watching!

[@abidhasansnigdho]

Just WOW! 👍

[@TheCodeCreative]

👍🏻👍🏻👍🏻

[@mobilenews628]

great video. You should need to explain your points with example. Thank you keep it up.

[@TheCodeCreative]

Thanks Ziaul!

[@hassanmehmood8711]

Which extension are you using for the measurement of pixels?

[@TheCodeCreative]

If you're on a Mac, you hold down Shift + Command + 4. I'm not sure what the equivalent would be on Windows.

[@shahriaromi715]

great video

[@TheCodeCreative]

Glad you enjoyed it

[@niteshagarwal9622]

At 5:34, I thought my laptop fell sideways ;)

[@TheCodeCreative]

haha

[@arturogomez7026]

Why not just use width? Or height? Why flex-basis?

[@pauls1883]

More guitars, please 😂

[@TheCodeCreative]

🎸🎸🎸🎸🎸

[@dhruv.pandey93]

What happens if each child has flex basis of 25% and then you give flex-grow=2 to 2nd item?

[@TheCodeCreative]

Hi Dhruv, in that case, if there are 4 child items at 25% each, there won't be any additional space left in the container for flex-grow to apply itself to. So setting the 2nd item to flex-grow = 2 shouldn't have any effect.

[@dhruv.pandey93]

So the grow property utilities extra available space of container. Thank you so much. It was never this clear✌️

[@TheCodeCreative]

@@dhruv.pandey93 yes, you got it. It's all about apportioning the remaining space in the flex container.

[@Kevessi]

1:56 lol he didn’t just use that sound effect

[@TheCodeCreative]

haha

[@grgndlkvdn4v]

Great explanation. Thank you, sir!

[@TheCodeCreative]

Glad it was helpful!