Flexbox-Flex Basis & Flex Grow
In a couple of my other posts, I talked about how you can use Flexbox to do a quick page layout with alignment tools in flex. One of the other great tools in the Flexbox toolbelt is Flex Grow, Flex Shrink and Flex Basis. These tools aren’t, in my opinion, as intuitive as the other flex properties, but once you see how it works, it’s not all that bad.
Here’s an image showing how it works:
Basically, in order to use flex grow, you need to first set a flex basis. If you have 4 items, like the ones shown here, you would define each with a flex basis. The flex basis could be a percentage, or pixel width, or whatever. In this case, the flex basis for each item might be 200px. Then, you could set a flex grow for each one. In this case, flex grow for item 2 is 2.
In other words, Let’s say the container size is 1000 px. There are 4 items, each at 200 px. That means that there is 200 px left over of extra space, after the items have been distributed. If we give item 2 a flex grow of 2, it will just take up twice as much of the leftover space (200 px) than the other items.
A great, practical use for flex grow, which I explain in this video, is with mouseovers. You can simply set a flex basis for all the buttons in a navbar, and then set the mouseover to a flex grow of 2 or higher. Then, your mouseover is handled by flexbox, instead of having to manually specify the changes. I hope this quick video help, and if you have any questions, feel free to reach out. Thanks!
