Here are some of the most important things I have learned about flex-basis during my use of Flexbox’s flex-basis.
Flex-basis controls either “width” or “height” based on the flex-direction
Flex-basis will override any other width: or height: properties if specifically declared anything other than flex-basis: auto (auto by default)
The shorthand for flex basis is (flex: $grow, $shrink, $size) and is set to (flex: 0 1 auto) by default.
When flex basis is set to auto, it first checks for a width or height property (based on direction) if none, it uses the elements content sizing
Flex-basis will still obey any min / max-width: or height settings. Again, it is based on the flex-direction:
Flex-basis in a column overrides height:, this is important because although width: will obey flex-shrink, height: will not. (This can cause confusing and unexpected results in your design.)
Important to note
Notice how auto is bold. By default, if you have a width set and did not declare a flex basis value, width will function normally on that element. There is no difference between how flex-basis: will function on your element and how width: will function on your element. Width will even obey flex-shrink when using Flexbox.
The divergent factor between width and flex-basis is the dynamic ability of flex-basis to change its effective direction based on the flex-direction.
The caveat
height: on the other hand acts a bit differently. The height property does not obey flex-shrink in the same way that width does. When using flex-direction column you should always use flex-basis to dynamically control your Flexbox’s sizing so that you have consistent and expected results.
Also take special note of bullet point number 4:
When flex basis is set to auto, it first checks for a width or height property (based on direction) if none, it uses the elements content sizing