Flexbox Sizing Flex-grow and Flex-shrink

 Flexbox Sizing | Cheat Sheet

1. Flexbox Sizing Properties

Flex Items can Scale Up or Scale Down their size based on the available space.

CSS Flexbox Sizing can have the following properties:

• flex-grow
• flex-shrink
   and more...

1.1 Flex Grow

The

flex-grow

property specifies how flex items Scale Up their size based on the available space.

Flex Grow property has the following values:

• 0(default)
• +ve values

In the example above, try out the

flex-grow

property with different values by changing the

flex-direction

.

1.2 Flex Shrink

The

flex-shrink

property specifies how flex items Scale Down their size based on the available space.

Flex Shrink property has the following values:

• 1(default)
• 0
• +ve values

In the example above, try out the

flex-shrink

property with different values by changing the

flex-direction

.