FlexBox Css

access_time 2020-02-25T12:33:21.639Z face Shagun Garg Css Tutorials

 

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.

Expert Instructors

Learn With One of the Best Instructor in Hindi

Learn Anytime

The biggest advantage of Online education is that you study at your pace.

Learn Anywhere

Now you can study at your home or with your friends.

Launch your GraphyLaunch your Graphy
100K+ creators trust Graphy to teach online
CodeSikho 2024 Privacy policy Terms of use Contact us Refund policy