CSS Flex Basis (flex-basis) Explained - Beginner Flexbox Tutorial

In this tutorial, we look at how the "flex-basis" property works in CSS Flexbox.
"flex-basis" determines the initial starting size of a child flex item before either flex-grow or flex-shrink have been applied to it.
All flex items are given a default flex-basis value of "auto", which means their initial starting size is based either upon their "min-content" width, or an absolute width if already specified elsewhere in the CSS.
"flex-basis" accepts any size value, such as pixels, relative units, or percentages.
"flex-basis" can also be given a value of 0, which means the browser ignores a flex item's initial size when calculating how much space it should occupy inside its parent container, if re-sizing with either flex-grow or flex-shrink.
All of the examples in this video use the default flex-direction of "row", however the principles remain the same when using a flex-direction of "column". Just be aware that the height of the flex items will be affected, rather than the width.
I hope you found this video helpful. If you have any questions, please leave them in the comments below and I'll do my best to answer as soon as possible.
TIMESTAMPS:
00:00 Introduction
00:24 What is flex-basis?
00:51 Understanding flex-grow
02:09 Understanding flex-shrink
03:32 The default flex-basis value of "auto"
05:00 Setting a flex-basis value other than "auto"
06:42 Using individual flex-basis values on individual flex items
08:54 Using a flex-basis value of "0"
10:53 Working with "flex-direction: column"
11:21 Summary
WATCH NEXT:
• CSS Flex Direction (flex-direction) Explained - • CSS Flex Direction (fl...
• How to Perfectly Center an Element using CSS Flexbox - • How to Perfectly Cente...
• How to Create a Sticky Footer using CSS Flexbox - • How to Create a Sticky...

[@sambangialekhya4488]

Sir your english is very simple and easily understandable by everyone, including those with average English speaking skills. Thank you sir

[@raven.4815]

Best video about flex-basis by far!

[@X-chess7]

Your videos are the best beautifully explained.Thanks a lot.

[@Mashael_96]

Your are the best one who is explain flex-basis .. I find issue for what is actually flex-basis does but the explain really help me.. Thank you so much

[@YousifAtique]

proved really helpful to me understanding flex-basis - many thanks

[@ling6701]

best explanation I've found on flex-basis. Thanks.

[@reihanseptyawan9347]

i was stuck in flex zombies game in level flex-basis, and this very helpful :)

[@poewi9791]

Super helpful! I was struggling to understand what flex-basis actually does and your explanation was very clear. Thanks!

[@frontendbeginners119]

Thanks very much... I'm glad it helped!

[@arianoveiri206]

I don't know how to thank you ! It was difficult to understand what flex-basis actually is... Your explanation was super awesome !

[@frontendbeginners119]

Thanks very much! I'm really glad you found it helpful :)

[@arthurradium5823]

Very nice Video.. now i get the difference between flex-basis and width !

[@frontendbeginners119]

That's great... I'm really pleased it helped! Thanks very much for watching

[@tadascibiras2227]

The best explanation of all flex tutorials. Keep making great content!

[@JavascriptForEverything]

Finally, I de-mystrify the flex-item width, thanks a lot.

[@usagiakimbo2506]

Finally clear and easy to understand explanation of flex-basis! Thank you very much!

[@frontendbeginners119]

Thank you! You're welcome and I'm glad it helped.

[@computersmith9095]

Thanks bro! clear and concise Very helpful

[@frontendbeginners119]

You're welcome! Thanks very much

[@freakazoidas]

clear and simple, thanks for the video!

[@brylleabella7153]

Thank you so much for this clear explanation! I was having a hard time following The Odin Project's discussion of flexbox so this is a lifesaver

[@Copernicus_Song]

Thank you very much!!! the clearest answer on the internet!! I finally understand this flex-basis =D I found a lot of explain on the internet, no one can explain this better than you!

[@frontendbeginners119]

Thanks very much! I'm really glad it helped.

[@iganic7574]

wonderful explanation ❤

[@bodhicreative279]

Thanks so much, you couldn't have explained this better! These flex-basis options are tricky concepts to grasp, but thanks to you I was able to implement this in combination with a flex-children wrap in-between breakpoints to achieve a much better layout for my tabs component - thanks a bunch!

[@seangrogan8307]

Thanks, this was a very useful video

[@suenequeiroz9512]

great explanation. Thank you for that

[@manthanpatel642]

thank you Tom :) .... there is no better explanation possible !!! you are genius :) , I've learned so much by watching your videos. The one I won"t ever forget is the video in which you describe the difference between align-items and align-content . I was stuck with that topic and you explained it so so well ! I have one small request ...please make video on media queries. Thank you so much again :)

[@frontendbeginners119]

Wow, thanks so much! I'm really glad my videos have helped you. I'll add media queries to my list of topics and hope to get something uploaded soon. Thanks for watching! :)

[@reallygoodstuff4441]

Great video 🔥😍

[@frontendbeginners119]

Thank you!

[@mocococo2877]

Amazing tutorial. Thank you. Please, tell me / us if we want to assign flex's elements some width (say flex direction row) is it the same if we give them through just CSS width or through flex-basis ? Thank you.

[@im2godly750]

Awesome and super imformative! Can you do JSX next please? :)

[@tusharcreates]

I don't know how to get this. I have some doubts like - 1. What's exactly the flex-basis property is doing what the width property can't do? 2. All the stuff I've gone through explaining flex-basis, they mentioned that it was used to set the initial width/height. What does this actually mean. Why not just set the width/height (depending on the flex-direction)?

[@sambangialekhya4488]

you have to watch the video more than 2 times then u will understand the concept.

[@bhavyawadhwa1]

At 10:15 you said that "when using flex-basis:0; the browser will ignore their initial size when sharing out the total width of the container and each item will end up the exact same size.". This is somewhat incorrect. --> Here flex-basis is not the real reason why items turn out as equal size. You can achive the same result by applying width:0 or or that matter any equal width say 10px or 20px to all the items. Flex-grow is the actual reason why they grow out to be of equal size. flex-basis just sets their width to 0px;