Flexulator

0 Container
-
0 Total Flex Basis
=
0 Remaining Space

GROW

/ * =

SHRINK

( * ) / = * =

GROW

/ * =

SHRINK

( * ) / = * =

GROW

/ * =

SHRINK

( * ) / = * =

Flexbox Formula

Grow

Each Flex Item has Flex: 1 1 100px

Step 1

Container - Total Flex Basis

= Remaining Space

2000px - 300px = 1700px

Step 2

[Element Grow / Total Grow]

* Remaining Space

= Element Flex Space

[ 1 / 3 ] * 1700px = 561px

Step 3

Element Flex Space + Element Flex Basis

= Final Size

561px + 100px = 661px Final Size

Shrink

Each Flex Item has Flex: 1 1 1000px

Step 1

Container - Total Flex Basis

= Remaining Space

2000px - 3000px = -1000px

Step 2

[Item Shrink * Item Basis]

/ [Total Flex Basis]

= [Value] * Remaining Space = Shrink Amount

[ 1 * 1000 ] / (3000) = .333 * 1000 = 333.33px

Step 3

Element Flex Basis - Shrink Amount

= Final Size

1000px - 333.33px = 667px

Links