View on 🖥️ 💻 to use the visual flexulator!

1424

width
grow
shrink
flex-basis
GROW CALCULATION
remaining space
1424 - 300 = 1124
allocated space
1 / 3 * 1124 = 375
final width
375 + 100 = 1424
SHRINK CALCULATION
remaining space
1424 - 300 = 1124
shrink factor
( 1 * 100 ) 100 / 300 = 0.333333
shrink amount
0.333333 * 1124 = 375
final width
100 - 375 = 1424

1424

width
grow
shrink
flex-basis
GROW CALCULATION
remaining space
1424 - 300 = 1124
allocated space
1 / 3 * 1124 = 375
final width
375 + 100 = 1424
SHRINK CALCULATION
remaining space
1424 - 300 = 1124
shrink factor
( 1 * 100 ) 100 / 300 = 0.333333
shrink amount
0.333333 * 1124 = 375
final width
100 - 375 = 1424

1424

width
grow
shrink
flex-basis
GROW CALCULATION
remaining space
1424 - 300 = 1124
allocated space
1 / 3 * 1124 = 375
final width
375 + 100 = 1424
SHRINK CALCULATION
remaining space
1424 - 300 = 1124
shrink factor
( 1 * 100 ) 100 / 300 = 0.333333
shrink amount
0.333333 * 1124 = 375
final width
100 - 375 = 1424

Grow

Shrink

Links

Take all the sizes from the flex items and add them up. If this total flex basis is less than the parent container, the remaining space will be distributed amongst the items.

The flex-grow attribute is used to determine how the remaining space should be allocated. Think of flex-grow as a mulitplier which will increase the amount of space it will get in the final calculation.

1

Flex Container Remaining Space
Add up each flex item's flex basis to get the total flex basis
Container Width 1424
-
Total Flex Basis 300
=
Remaining Space 1124

2

Calculate Flex Grow Space
Add up each flex item flex grow value to get the total grow
(Item Grow / Total Grow) (1/3 = 0.333333)
*
Remaining Space 1124
=
Allocated Space 375

3

Compute Final Width
Add the allocated space to the item's flex basis to get the final width
Allocated Space 375
+
Item Flex Basis 100
=
Final Width 1424

Take all the sizes from the flex items and add them up. If this total flex basis is greater than the parent container, each flex-item will have to reduce it's size to fit.

The flex-shrink attribute determines how much space is given up by the flex-item. Unlike flex-grow, the flex-shrink value controls how much space is given up. Increasing the flex-shrink will reduce the size of the flex-item relative to its siblings.

1

Flex Container Remaining Space
Add up each flex item's flex basis to get the total flex basis
Container Width 1424
-
Total Basis 300
=
Remaining Space 1124

2

Calculate Shrink Factor
Multiple each items' shrink value by it's basis to get the item shrink basis total. Sum all item shrink basis total values to get the shrink basis total. Divide these two to get the shrink factor.
(Item Shrink * Item Basis) = Item Shrink Basis Total (1/100) 100
/
Shrink Basis Total 300
=
Shrink Factor 0.333333

3

Allocated Shrink Amount
Multiply the shrink factor against the remaining space to finally get the amount to reduce from the item.
Shrink Factor 0.333333
*
Remaining Space 1124
=
Shrink Amount 374.67

4

Compute Final Width
Reduce the item basis by the shrink amount to get the element's final size
Item Basis 100
-
Shrink Amount 374.67
=
Final Width 1424