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

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
-
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

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
-
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