The flex is the short-hand property and sets the flexible length on flexible items.

Properties of flex:

flex-grow: If a number specifies the property and the reset of size will impact that item. Then it gradually grows its size.

flex-grow: 3;

flex-shrink: The shrinking property is opposite to the flex-grow. Here, it reduces the property and its size. when we specify a number to the shrinking property.

flex-shrink: 2;

flex-basis: It is used to specify the value of the initial flexible item and its property.

flex-basis: 200px, 0, auto;

flex-direction: This is used to set the direction of the items inside the <div> container

EX: row, row reverse, column, column reverse.

flex-direction: row reverse;

flex-flow: It displays the reverse order of the items and wraps the items certainly.

flex-flow: row wrap,row-reverse nowrap,column wrap-reverse,column wrap;

flex-wrap: Here, we can adjust the items flexibly, when we specify the property in the container.

flex-wrap: wrap;

---

justify-content: flex-start or end;

/* used to specify the direction of the flex.*/

It also has a few property values like space between, space around and space even.

align-items: start or end;

The aligned items are formed either at the front at starting position or at the ending and center.

order: 3;

The order items are used to specify the individual items. To set a certain order.

align-self: start or end, ceter;

This is used for the individual element in its direction.

align-content: flex-start or flex-end, center;

/* Align content uses to adjust the whole content in a single pace.