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
- Main axis of flexbox.
- Flex items formula
Main axis of flexbox
- If
flex-direction: row
orflex-direction: row-reverse
, yourmain-axis
will run left to right or right to left of the page in the inline direction (horizontally). - If
flex-direction: column
orflex-direction: column-reverse
, yourmain-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 theflex-basis
falls back to the item'swidth
property.
If nowidth
is specified, then theflex-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 onflex-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
-
Flex-basis
controls either “width
” or “height
” based on theflex-direction
. -
Flex-basis
will override any otherwidth
orheight
properties if specifically declared anything other thanflex-basis: auto;
. -
flex-basis
will still obeymin-width
andmax-width
or height settings, which is based onflex-direction
. - When
flex-basis
is set to auto, it first checks for awidth
orheight
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
Top comments (3)
can you please give the reference of all your quotes?
Hii Temani Afif, often I refer the MDN docs and freecodecamp blogs.
I meant the exact reference for each quote. I wanted to see where I can read each quote you added not in general.