Flex Box

Flex Box is one dimensional layout. Flex box deals with layout in one dimensional at a time either as row or as a column.


.flxbox{
display:flex;

flex box has 4 main axis:

1. Row (default)

when we use display:flex out items set by default as row and the direction is left to right.

{
flex-direction: row;
}


2. Row-revers:

It set out items in revers order like

4 3 2 1 and it will show right to left.


{
flex-direction: row-reverse;
}


3. Column

It is out item in column(same as row but top to bottom)


flex-direction: column;


4. column-reverse

set items bottom to top (in revers order)
flex-direction: column-reverse;