In PART 1 of this Article, we discussed the Flex-Box Properties of Flex-container. In this article, we will discuss the most commonly used properties of flex-item (flex-child).

Flex-items Properties

Order

Using this property, we can target to change position of individual item in row or column. here we assign a value to the items, the one with lowest value will be the first in sequence and the one with highest value will be the last. if we give similar value to two items then it takes the sequence in which it is placed by default.

let's understand it by example-

in this example,

• output1, shows the default sequence of flex-items, without any order.

• in output2, we see that the items are placed as per the order given. min value is taking first position and max value is taking last position.

Flex-grow

This property defines the ratio of how much the item will grow as compared to other items in the container(if there is extra space).

let's understand it by example -

here,

• output 1 shows the default output without any flex-grow property.

• in output 2, we set the flex-grow value of box1 to 2, hence it will grow by 2 times as compared to the remaining flex-items in the container.

flex-shrink

This property is just opposite to flex-grow property. It defines the ratio of how much the item will shrink as compared to other items.

let's understand it by example -

• here we see that output 1 is showing the default output without any flex-shrink property.

• In output 2, box1 is shrinking by 2X relative to other boxes in container.

*The article ends here. Hope you enjoyed reading this articles. I have tried to explain Css Flexbox in easy way giving example. Please suggest if any improvement is needed. Happy Learning....!!! Thank You.*