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 - https://www.youtube.com/watch?v=m7sGfDfll1E
• How to Perfectly Center an Element using CSS Flexbox - https://www.youtube.com/watch?v=6fCwYyvTEk0
• How to Create a Sticky Footer using CSS Flexbox - https://www.youtube.com/watch?v=8lx3V5mkJN4