Orange

Yellow

Green

blue

Indigo

Violet

Flex Properties for container:

Flex Properties for container items:

Note:

  • In this POC these properties are implemented only on first and/or last item present in the container. To see the differnce and easy understanding.
  • Flex shrink property is not working.

Description:

Key Notes:

Flex Basis:

  • Specifies the initial value of flex item before any available space is distributed.

  • Values can be lengths (e.g. px, %, em) or auto.

  • auto means items height and width property is used.

Flex Grow:

  • The flex-grow property defines how much a flex item should grow relative to other items when extra space is available in the flex container.

  • When we apply flex-grow: 2 to the first item without specifying flex-grow for other items (or setting it to 0), the first item will take all the extra space.

  • The formula for space distribution is: Available extra space * (Total flex-grow of all items / flex-grow of item).

  • If we set flex-grow: 1; to all items in fex container, the available free space will be equally distributed to all items to grow.

Flex Shrink:

  • The flex-shrink property defines how much a flex item will shrink relative to other items when there is insufficient in the flex container.

  • A value of 0 i.e. flex-shrink: 0; prevents item from shrinking.

  • A value of greater than 0 e.g. flex-shrink: 3; allows the item to shrink, with higher values shrinking proportionally more.