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 Direction Column:

  • Block-Level Behaviour: Flex items in a column behave like block elements, which naturally take up the full width of the parent container.

  • Cross-Axis Stretching (Default align-items: stretch): By default, align-items: stretch is applied, making items stretch to fill the full width of the container. .

  • Update align-items property or set the width/max-width o the itesm to limit the width.

Flex Align Self:

  • It' a container item property which enables the property to align it self vertically i.e. from Top to Bottom.

  • By default it's set to stretch and hence in flex column direction it takes-up all the height. To fix the height of the items change the property value to the relevant one as per your requirement.

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.