Mastering on flex-basis behaviour
Tags: html, css, webdev, todayilearned
Published: 2021-12-31 06:25:57

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 <code>flex-basis</code> behavior?? what's the difference between <code>width</code> and <code>flex-basis</code>?? 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 <code>flex-basis</code> behaviour and let's get this show on the road. So, Be feel like

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxj5yoe0n9lrjytcffv0.gif)
 
Before understanding of <code>flex-basis</code>. Need to aware of 

1. <b>Main axis</b> of flexbox.
2. Flex items formula

<h2>Main axis of flexbox</h2>
- If <code>flex-direction: row</code> or <code>flex-direction: row-reverse</code>, your <code>main-axis</code> will run left to right or right to left of the page in the inline direction (horizontally).
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5h5wywuoo7cb5xntqasu.png)
- If <code>flex-direction: column</code> or <code>flex-direction: column-reverse</code>, your <code>main-axis</code> will run top to bottom or bottom to top of the page in the block direction (vertically).
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9liam9aifn9hf5jt977.png)
 
<h2>Flex item formula</h2>
Flex item(which means elements inside the flex container) following specific formula,
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vuvya31pioueoctmf15b.png)
Which conveys that,
><em>If no <code><b>flex-basis</b></code> is specified, then the <code>flex-basis</code> falls back to the item's <code>width</code> property.
>If no <code>width</code> is specified, then the <code>flex-basis</code> falls back to the computed width of the item's contents</em>.
 
<h2>flex-basis</h2>
The default value of <code>flex-basis</code> is <b>auto</b>. <code>flex-basis</code> take an element’s size across the main axis. which means,
- if <code>flex-direction</code> will be <b>row</b> and flex-basis is 250px, then main axis is in inline direction(horizontally) and it take 250px in <b>width</b>.
- if <code>flex-direction</code> will be <b>column</b> and flex-basis is 250px, then main axis is in block direction(vertically) and it take 250px in <b>height</b>.

Hope you get my point😍. If can't, don't worry. You can understood through below example,
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i51kmnwotu59f2nefv81.gif)
 if <code>flex-direction</code> will be <b>row</b> and flex-basis is 160px, then main axis is in inline direction(horizontally) and it take 160px in <b>width</b>. If we change the flex direction to <b>column</b>, then main axis is in block direction(vertically) and it take 160px in <b>height</b>.
><em><b><code>Flex-basis</code> thus alternately determines width or height, depending on <code>flex-direction</code></b>. Seems like <b>dynamic</b> in nature</em>.

I recommend you to practice in codpen like just swtich the <code>flex-direction</code> and see the effect lively..
 
{% codepen https://codepen.io/preethi-dev/pen/bGoLOqe %}

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

<h2>4 key behaviours of flex-basis</h2>
1. <code>Flex-basis</code> controls either “<code>width</code>” or “<code>height</code>” based on the <code>flex-direction</code>.
2. <code>Flex-basis</code> will override any other <code>width</code> or <code>height</code> properties if specifically declared anything other than <code>flex-basis: auto;</code>.
3. <code>flex-basis</code> will still obey <code>min-width</code> and <code>max-width</code> or height settings, which is based on <code>flex-direction</code>.
4. When <code>flex-basis</code> is set to <b>auto</b>, it first checks for a <code>width</code> or <code>height</code> property (based on direction) if none, it uses the elements content sizing.(just remember that flex-item formula <b>content <- width <- flex-basis</b>)

><b>Note:</b> <code>flex-basis</code> 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). <b>It's the ideal or hypothetical size of the items</b>. 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(<code>flex-shrink</code> start to shrinking the items), or will have extra space(<code>flex-grow</code> start to growing the items).

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9dbaimtu10jph7n1455.gif) 

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

> <em><b>A best practice is to just use flex-basis instead of width or height</b>. 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</em>. 

If i continue now, which make you feel overwhelmed😥. <b>So, If you feel need live example for key behaviours of flex-basis and just drop a comment </b>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!!
<b>Preethi</b>
<em>- Make your CSS life easier</em>