Mastering on flex-basis behaviour

Hey Gang, Feel lucky to see you again. when start to learning on flexbox, feel like the least well-explained property in Flexbox tutorials. start to getting confused😥 like what exactly flex-basis behavior?? what's the difference between width and flex-basis?? etc.,

Uh, increase our frustartion rate right. After reading lots of blog and did some exprimentation. Finally grasped the answer for all question🎉🎉. Then I'm get ready to make you mastering on flex-basis behaviour and let's get this show on the road. So, Be feel like

Before understanding of flex-basis. Need to aware of

1. Main axis of flexbox.
2. Flex items formula

Main axis of flexbox

• If flex-direction: row or flex-direction: row-reverse, your main-axis will run left to right or right to left of the page in the inline direction (horizontally).
• If flex-direction: column or flex-direction: column-reverse, your main-axis will run top to bottom or bottom to top of the page in the block direction (vertically).

Flex item formula

Flex item(which means elements inside the flex container) following specific formula,

Which conveys that,

If no flex-basis is specified, then the flex-basis falls back to the item's width property.
If no width is specified, then the flex-basis falls back to the computed width of the item's contents.

flex-basis

The default value of flex-basis is auto. flex-basis take an element’s size across the main axis. which means,

• if flex-direction will be row and flex-basis is 250px, then main axis is in inline direction(horizontally) and it take 250px in width.
• if flex-direction will be column and flex-basis is 250px, then main axis is in block direction(vertically) and it take 250px in height.

Hope you get my point😍. If can't, don't worry. You can understood through below example,

if flex-direction will be row and flex-basis is 160px, then main axis is in inline direction(horizontally) and it take 160px in width. If we change the flex direction to column, then main axis is in block direction(vertically) and it take 160px in height.

Flex-basis thus alternately determines width or height, depending on flex-direction. Seems like dynamic in nature.

I recommend you to practice in codpen like just swtich the flex-direction and see the effect lively..

Hey, Still with me🥳. I can understood, You are getting very curious about flex-basis behaviour. So, It's my pleasure to show you 4 key behaviours of flex-basis.

4 key behaviours of flex-basis

1. Flex-basis controls either “width” or “height” based on the flex-direction.
2. Flex-basis will override any other width or height properties if specifically declared anything other than flex-basis: auto;.
3. flex-basis will still obey min-width and max-width or height settings, which is based on flex-direction.
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.(just remember that flex-item formula content <- width <- flex-basis)

Note: flex-basis is: the size of flex items before they are placed into a flex container(which means before the flex-shrink or flex-grow getting applied). It's the ideal or hypothetical size of the items. After placing the flex item in flex container, things may getting changed based on flex container size. Because flex container won't have enough space(flex-shrink start to shrinking the items), or will have extra space(flex-grow start to growing the items).

uh😅, flex-basis guy have so much of behaviour and Congratulations,You reached the destination.

Please execuse me, I will end up with a bonus info.

A best practice is to just use flex-basis instead of width or height. Especially since Safari still has an old flexbox bug where it won't apply flex-shrink properly to items that use height instead of flex-basis.

If i continue now, which make you feel overwhelmed😥. So, If you feel need live example for key behaviours of flex-basis and just drop a comment which make a way to know about your thought and I will start to build part-2.

If you loved this blog, Then give an endearing heart💝and drop your thought about this blog😍 which really a lot to me. I love the discussion with you, If you feel not comfortable at styling concepts or have any doubts.

Thanks for Reading!!
Preethi
- Make your CSS life easier