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:

[Mashael_]

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

[michelemoneywell]

Thank you for a simple, well-explained and illustrated explanation. I get it now.

[ling]

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

[sambangialekhya]

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

[poewi]

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

[arianoveiri]

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

[tadascibiras]

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

[JavascriptForEverything]

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

[arthurradium]

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

[brylleabella]

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

[YousifAtique]

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

[usagiakimbo]

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

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

[bodhicreative]

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!

[X-chess]

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

[reihanseptyawan]

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

[computersmith]

Thanks bro! clear and concise
Very helpful

[manthanpatel]

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

[mocococo]

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.

[bobnapoleon]

really helpful and concise, thank you very much