flexbox and border-box
Ive researched and found tons of conflicting answers on this so i thought i should go straight to the experts...
So does flexbox respect
box-sizing: border-box ? I have this code and the hover state of the buttons move everything around when the border is added. I am not sure if border-box isnt working because i dont have an explicit width on them or if its because they are flex-items. Does anyone have a definitive answer?
https://codepen.io/Stacey-Hart/pen/zYyPmKB3 Replies
it is because there is no size set. The border will just be added, there is no other space
for example, your cta button's height
no hover: lineheight + padding top / bottom
hover lineheight:+ padding top / bottom + border top/bottom
the hover state is 4 px larger
to make it not jump, you can add the same border to the idle state, but give it a border-color: transparent
Thank you, yes I did add the border in both states on the original project , I was just curious about flexbox and box-sizing. (Copied it from icodethis to codepen to share).
So say I had a width on the buttons, in between states it wouldn’t jump when a border was added to the hover? Meaning flexbox DOES work with border-box?
Yea, it works, as long there is space for the border to go. You can acchieve that by setting a width or having flex grow