Table of contents
No headings in the article.
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.