Trouble with Flexbox

ionic-v1
1

I am using flexbox to display (6) elements in two rows with (3) above and (3) below. I want the boxes to remain equally sized independent of the content. But, they should grow or shrink equally to fill the different mobile form factors. I think it is all setup, but I have a problem when the content of the boxes is differently sized. I don’t think it is a padding or marigin issue. I just think that the flex box is growing shrinking base on the content. Below is a screenshot…

image

The right-most box in each row is differently sized because the content is a (3) digit number in the top, vs a (2) digit number in the bottom. So, it distributes the space slightly different. Is there a flexbox guru that can help me to square this away? MHartington seems to be the resident advocate for flexbox. I seem to be so close but can’t figure this out. Any help is greatly appreciated…

2

Answered my own question. Poked around flexbox posts on SO and found this one Flexbox Equal Width The short answer is that flex for the item is made up of flex-grow, flex-shrink, AND flex-basis. I needed to change flex-basis from ‘auto’ to ‘0’. This seems to have done the trick and the size basis is no longer dependent on content. Posted here for anyone else struggling w/ flexbox.

image