Multan Institute of Information Technology
Flexbox in CSS
Flexbox
Flexbox is layout model used in css to manage the items or content inside the web pages.It helps us to organize and align the content inside a container
- The Parent element becomes the flexbox by using the property as display : flex ;
- The child items become the flex items automatically when we give display flex to his parent
- The flexbox is also very useful to make the responsive layout for the different screen sizes
Properties used in the flexbox
Justify Content : It is used to align the content horizontally
Align items : It is used to align the items vertically
Flex direction : It is used to control the direction of flexbox.It includes values like row , column , row-reverse and column reverse
Flex wrap : It includes the responsiveness of the website. It implements when we reduce our screen size each card wrap automatically to fulfill the required space and make it responsive
Gap : It is used to give gaps between the flex items.In short it add spaces between them very clearly
FOR EXAMPLE :
.container {
display : flex ;
justify-content : center ;
align-items : center ;
flex-wrap : wrap;
flex-direction : row or column ;
gap : 20px ;
}
Benefits of using flexbox
We can easily manage responsive layouts for the website
We can easily align the items to the center of the page both horizently and vertically
It reduces the complex use of floats , and positions to control the content inside the website
Summary
Flex box is very modern way to manage the responsive layouts of the web pages.We can easily control alignments , responsiveness , gaps or spacing just by using flexbox.
