Grid and flex box
How to move all children tags to center in parent particular tags.
For that we have to first add the display : flex property to the parents
Now if we see all the elements inside the parent tag it will display side by side, Previously it will be vertical one by one.
Default values will be either block or online
Based on the elements perspective
block will for the elements to display
Horizontally one by one.
Online will help to display vertically.
Flex is designed to change the property based on the elements x axis and y axis, can we change and view the elements appearance to we have add the flex property
For better visualization we just add some more height and width for the parent element.
Suppose if we want to change or add some behaviour for the elements in horizontally we want to handle the justify-content property
Let us justify-content property with different values and see how they change.
Flex start
Flex End
Center
Just like horizontal, we will try some of the properties for vertically change, we can use the three values for the same as the align-item.
Flex start
Center
Flex End
Suppose if we use the three properties for this for the parent element it will always be how we described, even if we change the window size, it will remain the same.
What will happen if the window size is less than what we expect,
Let we see what was happening
Was it actually adjusting the width between each element inside the parent tag?
Suppose what will happen if we add more
need to work on more
Top comments (0)