Everything about css flexbox property

What is flexbox?

Flexbox is a new css module. Using flexbox you can easily align elements in different direction and order.

Flexbox properties

display:flex;
Using this property we creating flexbox. If your display property value flexbox then the element will act like a flex box.
The act is all the element present inside the container will come into one row.
Use this property on the container or parent element.

flex-direction: fixed values are row(default), row-reverse, column, column-reverse
This property is used with the container. To set the direction of the elements present in the container this property is used. flex-direction:row(default)
When we use flexbox, all the elements comes into a row and all the elements position is the the left side.
flex-direction:row-reverse
Now if you want, the element on the right side of the row and want to change the order of those element then use row-reverse.
flex-direction:column
If you want the element in the form of column then use column. By default the column elements order starts from the top to bottom
flex-direction:column-reverse
If you want to change the order of the column elements the use reverse column.

flex-wrap: fixed value nowrap(default), wrap and wrap-reverse;
Suppose the width of the container is less and the number of elements are much. In this the elements will overflow from the container. To control this overflow problem we use this property.
flex-wrap:nowrap(default)
flex-wrap:wrap
To warp the elements so that they can't over flow, this property value is used. This property value will wrap the elements in row wise. Suppose one row can't hold three elements and there are total 6 elements then wrap will wrap the element like:
1 2 3
4 5 6
flex-wrap:wrap-reverse
Now if you want to change the order of wrap means from row wise to column wise then use warp-reverse.
like:
1 4
2 5
3 6

flex-flow: flex-direction flex-wrap
This is shorthand of flex-direction and flex-wrap. At first pass the value of flex-direction and then pass value for flex-warp.

justify-content:fixed values;
This property is used to horizontally align the elements.
The values are flex-start, flex-end, center, space-around, space-between, space-evenly

align-items:fixed value;
This property is used to vertically align the elements of a single row.
The values are flex-start, flex-end, center, stretch, baseline

align-content: fixed values;
This property is used to vertically align the elements of double rows.
The values are flex-start, flex-end, center, stretch, space-around, space-between, space-evenly

align-self: fixed values
This property is used to vertically align a single element.
The values are auto, flex-start, flex-end, center, stretch, baseline

order: numeric values;
To change each elements order individually this property is used. Here we have use a unique class or id inside of each element opening tag.
Suppose you want third element at first. To do that for third element pass order value 1. If you want first element in fourth position then target first element using id or class and the pass order value 4.

flex-grow:numeric value;
Used to control the width of elements. If you use this property on the container then you can pass 0(default) and 1. Here one means width of all elements are same and all the space will equally divided between all the elements.

Suppose you want to increase one element height more than the others. In this case target that element individually and then write this property and pass values like 2, 3, 4, 7 etc.
If you use 3 it means the width of that div will be 3 times more than the other elements.
Similarly if you write 5 it means the width of that div will be 5 times more than the other elements.

flex-basis: value in pixel, percent ,etc;
This property work like maximum width. This property is used set width of each element. If you want to use this property then you need to use this for each element individually.

flex-shrink: numeric value;
This property is used on element individually. This property is used to make responsive element individually. Responsive means when the viewport is less then the element will shrink and when the viewport is more then the element will expand. If you want to make third element responsive then use this property only in third element. Here 0 means no responsive, 1 means responsive. You can use value more than 1 like 2,4, etc. But if you use value more than one then the shrink of that element will become more than the other element.