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
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
flex-direction: row-reverse, your
main-axiswill run left to right or right to left of the page in the inline direction (horizontally).
flex-direction: column-reverse, your
main-axiswill run top to bottom or bottom to top of the page in the block direction (vertically).
Flex item formula
flex-basisis specified, then the
flex-basisfalls back to the item's
widthis specified, then the
flex-basisfalls back to the computed width of the item's contents.
The default value of
flex-basis is auto.
flex-basis take an element’s size across the main axis. which means,
flex-directionwill be row and flex-basis is 250px, then main axis is in inline direction(horizontally) and it take 250px in width.
flex-directionwill 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,
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-basisthus 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
Flex-basiscontrols either “
width” or “
height” based on the
Flex-basiswill override any other
heightproperties if specifically declared anything other than
flex-basiswill still obey
max-widthor height settings, which is based on
flex-basisis set to auto, it first checks for a
heightproperty (based on direction) if none, it uses the elements content sizing.(just remember that flex-item formula content <- width <- flex-basis)
flex-basisis: 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-shrinkstart to shrinking the items), or will have extra space(
flex-growstart to growing the items).
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!!
- Make your CSS life easier