Anatomy of Greed and Modesty

These are the three most complex properties to understand, but they're exactly what make Flexbox " flexible " .

1. flex-basis

This is the " ideal " size of an element before it starts growing or shrinking.

• Similar to width, but in Flex-world it's more of a " wish " .

2. flex-grow (Growth)

This is the greed coefficient.

• 0: Don't grow.
• 1: Take all free space.
• If one has flex-grow: 2 and another 1, the first will take twice as much extra space.

3. flex-shrink (Shrinking)

Modesty coefficient. If there's not enough space, elements with higher flex-shrink will shrink faster than others.