flexbox is used for the header section or when you want to stuff in one line.

You can place elements in the end center start have space between them around them evenly divided space etc.

the flex property is a shorthand property for flex-grow, flex-basis, and flex-shrink.

align-items property aligns the elements as per the cross axis.

If the elements are going from left to right then

            ***the main axis = left to right***

             ***cross-axis = top to bottom***

If the elements are going from top to bottom then

            ***main axis = top to bottom***

            ***cross-axis = left to right***

The flex-direction property is used to define the direction of the main axis in the layout.

flex-wrap property can be used to put any single element below any other element.

The flex-basis property is used to define the base width of the element. If there is less width in the container then it will shrink and if we stretch the container the flex-basis will still be the same no matter how much we stretch it.

flex-grow property is used to grow the width when we stretch the container.

flex-shrink property is used to shrink the width of the elements as per the size of the container.

order property is default 0 and it behaves like indexes of numbers in an array means when you apply 1 to order it replaces the last element with the element at place 1. If you give a negative value then it places at the start