Today I would like to tell you all about this awesome property that CSS got a while back, but is now finally fully supported by all browsers and should be used by all web designers and developers. This property is called Flexbox or display: flex.

Why should you use it, you might ask. The reality of it is, if you have ever tried to centre something vertically and horizontally in CSS, you know the struggle that it is, and you know how after swearing at the screen for 30 minutes, you’d just end up cheating and setting the pixels manually, cause nothing else works. What if I told you that flexboxes allow you to centre an item within a container with 3 lines of code, and it would consistently work across all browsers? Well it can:

display: flex;
align-items: centre;
justify-content: center;

Flexboxes use the concept of a container and items within it, and uses tools like: justify and align to determine the position of the items within the container. Furthermore, you can easily flip the direction (order) of the items using flex-direction, change the direction from row to column and  grow and shrink the items with just a few lines of code. Its that simple.

I have started using flexboxes at work exclusively, and have not even had to write another "margin: 0 auto" in months! Now I am in the process of fixing up the anime club sites with the same stuff, to make them more robust and the code cleaner and more manageable.

If you want to learn more about this, then here is a link to CSS Tricks, a great website for learning about various interesting css properties and selectors.

Also there is a flexbox game, where you can learn how to align elements in various ways. Unfortunately though, they dont show you the code, but you can work it out from the buttons you are pressing on their UI.

And here is an article (with GIFs), that goes over all the flex box selectors and explains how they work.