Flex-box is like any other concept ,it is not something you can learn/understand just by reading .Unless you write the code yourself and experiment with it you can never understand it.It costed me some time because I was just watching a lot of videos and not writing the code .More you code, more you learn and more you experiment ,more you experiment more you get into errors and when you fix those errors you become what is called a developer.I will try my best to explain how I understand flex-box works.
So first things firsts:
*In order for you to apply flex-box (helps in positioning containers and its elements) you need a container that has some elements.
*To apply flex-box in a container you access with container/div with its class or id and give it a property called display:flex;
*As soon as you do display:flex in a container all the elements inside the container with move into a single row;
As you can see below there is a container that has yet to be applied display flex,you will notice that the container's elements are all in a column .
Now notice what happens if we put a display flex in the container
Now you can notice i applied display flex on the container having the element and all of the elements inside it moved in a row which is a default behaviour of flex-box ,you can change this by applying the flex-direction:column in the container to move the elements back in one column.
This helps in responsive design because some time you want the elements to be in a row and some times in column.
you can also use the change the order by using flex-direction:row reverse and column-reverse which would change the order of the elements inside the container.Take a look below i have given each element a different color so you can notice the difference.
this is after applying flex-direcetion row-reverse,it reversed the order of elements while keeping it in a row ,same can be done with columns as well
If you notice the elements are centered in the above picture which is because of another property of flex-box called justify-content:center what it does is that is horizontally centers the elements and to center the elements we use align-items :center.You can learn about more option you get with them like space-evenly which are also helpful mostly in navigation bars.Below is the align items property picture.
Thanks for reading it so far you can get started with flex-box now.Read more about it in w3school and practice it well.
Top comments (0)