Flex, the display that takes over

One problem that I am always having is vertically centering HTML elements inside a container. In the good old days we would just simply use tables and use a vertical-align CSS and everything would be dandy. With the introduction of div things changed and the use of the table for non-tabular data became one of those frowned upon exercises. Set the time of your google search for let’s say 2007 to 2015 and see how many questions about vertically centering elements inside a dynamic div and how many different answers you would see. I have used so many different ways that I can’t remember a single fit-all solution.

As I have always said building a website is easy but building a website like another website is really challenging because you have to learn things that you didn’t know. During some of my projects, I encountered with a new container class called flex. At first, I thought this is just another fancy class that I can live without but when I come across this site I realized that I am missing something huge.

For example, do you want to make an element vertically in the middle that’s easy:

 

That’s all, all the elements inside the mentioned div get vertically aligned in the middle of the div.

That’s actually one small benefit of flex, it actually does the job of the script for a lot of responsive tasks. I personally still haven’t worked much with the responsive aspect of flex but I am going to.

Leave a Reply

Your email address will not be published. Required fields are marked *