Flexbox Tester
Understand how to calculate the width of flex items.
Working it out
1. Find the space remaining:
The flex container is: 0px
The initial size of all the flex items is: (0px + 0px + 0px) = 0px
So the space remaining is: 0px - 0px = 0px
That's a positive number, so we will be using flex-grow to work out how to distribute the remaining space between the flex items.
2. Find the size of 1 flex-grow value:
The total of all flex-grow values is: (0 + 0 + 0) = 0
So 1 flex grow is: 0px/0 = 0px
2. Find the size of each flex item:
Flex item 1 should be: (0 × 0px) + 0px = 0px
Flex item 2 should be: (0 × 0px) + 0px = 0px
Flex item 3 should be: (0 × 0px) + 0px = 0px
That's a negative number, meaning our items don't fit in the flex container. We will be using the flex-shrink factor determine how much each flex item will shrink.
2. Find the flex shrink factor for each item:
The total of all scaled flex shrink factors: ( (0 × 0) + (0 × 0) + (0 × 0) ) = 0
The flex-shrink factor for item 1 is: (0 × 0) / 0 = 0
The flex-shrink factor for item 2 is: (0 × 0) / 0 = 0
The flex-shrink factor for item 3 is: (0 × 0) / 0 = 0
3. Find the size of each flex item:
Flex item 1 should be: (0 × 0px) + 0px = 0px
Flex item 2 should be: (0 × 0px) + 0px = 0px
Flex item 3 should be: (0 × 0px) + 0px = 0px
NOTE: If these any of calculations result in a negative width, that item will be clamped at 0 and the calculations will be done again with remaining items and new remaining space.
In this case there is no remaining space, the basis will be the exact size of the elements and therefore there is nothing more to work out.
Apologies, but there is nothing more delightful than anoying the internet with Comic Sans.