GROWING AND SHRINKING

The Flex Shorthand

      The flex declaration is actually a shorthand for 3 properties that you can set on a flex item.

         Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using this property,you can write more concise stylesheets,saving time and energy.

   So, flex is actually a shorthand for flex-grow,flex-shrink and flex-basis.

  The default value of the flex property is shown in the above:flex-grow: 0,flex-shrink: 1,flex-basis: 0%.

Flex-Grow

It expects a single number as its value,and that number is used as the flex-item's "growth factor" . When we applied flex: 1 to every div inside our container,we telling every div to grow the same amount.

Flex-Shrink

It is to flex-grow, but sets the "SHRINK FACTOR" of a flex item. flex-shrink only ends up being applied if the size of all flex items is larger than their parent container.
The default shrink factor is flex-shrink: 1,you can also specify higher numbers to make certain items shrink at a higher rate than normal

note

An important application to notice here is that when you specify flex-grow or flex-shrink,flex items do not necessarily respect your given values for width because when their parents is big enough, they grow to fill space.

Flex-Basis

flex-basis simply sets the initial size of a flex item,so any sort of flex-growing or flex-shrinking starts from that baseline size. Shorthand value defaults to flex-basis: 0%

IMPORTANT NOTE

 The actual default value for flex-basis is auto,but when you easily flex: 1 on an element, it interprets that as flex: 1 1 0. If you want to only adjust an item's flex-grow, you can simply do so directly, without the shorthand.

thank you..