The CSS property flex specifies how elastic elements can be stretched or shortened to fit the space available in a Flex container.

  • initial

    Elements are sized according to their width and height. It will shorten itself to fit the Flex container, but it will not elongate and absorb the extra free space in the Flex container to fit the Flex container. Equivalent to setting the property to” Flex: 0 1 auto”.

  • auto

    Elements will be sized according to their width and height, but will stretch and absorb the extra free space in the Flex container, and will shorten themselves to fit the Flex container. This is equivalent to setting the property to” Flex: 1 1 Auto “.

  • none

    Elements are sized according to their width and height. It is completely inelastic: it neither shortens nor elongates to fit the Flex container. Equivalent to setting the property to” Flex: 0 0 auto”.

  • 1

    Equivalent to setting the property to “Flex: 11 0%”.

Summary: 1. Flex: 1 is created by flex-grow: 1; flex-shrink:1; flex-basis:0%; Three CSS properties. 2. When flex-basis is set to 50px; 3. When flex: None is set to the size of the original box, it will not scale and may cause content overflow