Flexbox is used To Restrict Content inside a box i.e a container or we can say a div.
flexbox comes up with flex-direction.
flex-direction can be row or column.
flex-direction : row means that each and every element inside div on which flex is applied will aligned side by side.
flex-direction : column means that each and every element inside div on which flex is applied will aligned top to bottom.
flex also gives us two things to align position of items i.e justify-content and align-items.
justify-content is applied to tell the direction of child in the direction flex is applied example if flex is column that means that justify-content is going to apply the direction from top to bottom.
example , justify-content : flex-start so it will align child at top.
justify-content : center it will align child at center. That center will be from top to bottom that is vertically.
justify-content : flex-end so it will align child at bottom vertically.
align-items set child position in opposite direction of flex.
For example, If we have applied align-items : flex-start for flex-direction column
then it is going to align the child element at left. because opposite of column is row where items are from left to right.