CSS FlexBox

FlexBox(Flexible layout model) is a layout model in css that provides an efficient way toto arrange, align and distribute elements.

Great for dealing with dynamic or unknown sizes.

It is a better approach than float property to align the element on web page.

We can only align the direct children of parent element.

One-dimentional layout model (CSS grid is Two-dimentional layout mode).

Flex items are put in a flex container.

Property:

flex-direction:row; -> it is by default, the direction is row.

To display a flex container you need to set the flex container display:flex then the items inside the flex container will align side by side with in container.

Property:

flex-direction:column; -> it align all flex box element in a single column.

Align & Justify Items

It align flex box items horizontally and vertically with in the flex container.

 flex-direction:row;
Justify-content:center; //it align item on main axis
align-items:center;    //it align item on cross axis     
                    

 flex-direction:column;
Justify-content:center; /*it align item on main axis*/
align-items:center;     /*it align item on cross axis*/