Star

View on 🖥️ 💻 to use the visual flexulator!

width
grow
shrink
flex-basis
GROW CALCULATION
remaining space
- =
allocated space
/ * =
final width
+ =
SHRINK CALCULATION
remaining space
- =
shrink factor
( * ) / =
shrink amount
* =
final width
- =

width
grow
shrink
flex-basis
GROW CALCULATION
remaining space
- =
allocated space
/ * =
final width
+ =
SHRINK CALCULATION
remaining space
- =
shrink factor
( * ) / =
shrink amount
* =
final width
- =

width
grow
shrink
flex-basis
GROW CALCULATION
remaining space
- =
allocated space
/ * =
final width
+ =
SHRINK CALCULATION
remaining space
- =
shrink factor
( * ) / =
shrink amount
* =
final width
- =

Grow

Shrink

Links

When the combined size of all the flex items is less than their container, the remaining space is distributed amongst all the items. The flex-grow attribute is used to determine how the remaining space should be allocated.

1

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

2

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

3

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

If the space remaining is a negative this means that the flex container is smaller than the preferred width of all the flex items. They are going to have to shrink. By assigning a flex-shrink value we can control much space each flex item will surrender.

1

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

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 (/)
/
Shrink Basis Total
=
Shrink Factor

3

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

4

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