Flex box is a parent property. We can align items in a container in any direction like right,left,center,bottom etc , with the help of flex box container property. Flexbox works in two axes, the first is main axis and cross axis.

Flexbox Properties for the Parent

Display:- When we want to apply flexbox to any container then we asinine display property to the container.

Flex-direction:- By default flex-direction is row in flexbox but we have some different values also.

1.row(default)-It will align the item left to right.

2.row-reverse-It reverse all the items in row.

3.column-It align the items from top to bottom.

4.Column-reverse- It reverses the items in the column.

Flex-wrap:- By default all the items try to fit into one line , but you can change this with the help of flex-wrap is nowrap you should change it to the wrap and items will wrap if they didn't fit in a single line.

Justify-content:- This is the most used property in flexbox . It aligns items in a container horizontally (along the main axis) , we have many different values in it.

1.Flex-start:-it align all the items in the start.

2.Flex-end:-it align all the items at the end.

3.Center-it horizontally center the items.

4.Space-between:-it gives the space between items.

5.Space-around:-it gives the space around the items.

6.Space-evenly:-it will distribute the space evenly among all the items.

Align-item:- It is also the most used property in flexbox . It aligns the items vertically (cross axis) . we have different types of values in it.

1.Flex-start: it aligns items to the top of the container.

2.Flex-end: it aligns items in the bottom of the container.

3.Stretch: the item occupies all the height of the container.

4.Baseline: items are aligned such as their baseline alignment.

Gap:- It is the shorthand of row-gap and column-gap.

Properties for the Children(flex items)

Order:- It defines the order of flex items, by default the order of any item is zero.

Flex-grow:- With the help of this property flex items will grow if necessary , the default value of flex-grow is 0.