Creating layouts for websites and web apps has always felt like building a house of cards, one false move and the whole thing can turn into a mess. There has always been the need for lengthy hacks with floats and clearfixes, and in the worst cases some developers will even resort to tables (I know, I threw up a bit as well).
Even things that would seem so simple like centering elements both vertically and horizontally feel like you have to delve into the dark arts of CSS magic to get a result. And of course there is the Holy Grail of layouts which has challenging developers for years.
All of these hacks, tricks and woes are a thing of the past with Flexbox.
get with the times, man
Ok so Flexbox isn’t exactly the latest development, but I have never felt comfortable using tools that don’t have decent browser coverage.
When recently working on a project where I needed to create some simple columns, I thought I would check to see how well supported Flexbox had become. The coverage had grown and it had become more usable, so I gave it a shot.
I was really surprised at how simple Flexbox was to use so I thought I would share a few of the painful CSS hacks, and their simple solutions using Flexbox.
Creating simple columns in CSS isn’t the trickiest of tasks, but you can end-up with a lot of code.
the current way
CSS Classes need to be written for any number of columns, although it’s always recommended to stick to twelve. This obviously results in quite a bit of code.
This example shows how much code you need to just handle four columns, and there would be an extra fourty lines to handle twelve!
the flexbox way
When it came to using Flexbox for creating columns, I was shocked at how much my code has been reduced. There is no need to set widths for each column amount, and most importantly no hacks are applied.
All you need to do is simply set
display: flex; on the column wrapper class, and
flex: 1; on the column class. Then just add the amount of columns needed in the HTML and you’re done!
In my example below you will notice I have added vendor prefixes to the Flexbox properties as some browsers still rely on them.
what if they’re not equal?!
Sometimes you don’t want all columns to be the same width. You may want the featured package on a pricing table to be slightly wider than the others, for example. That’s no problem with Flexbox.
What we have done here is say if a column has the class
featured, then it should use 2 flex units, rather than 1 like the others. As you may notice, it’s not exactly double the size. This is due to how Flexbox calculates sizes when padding is applied to each item, which is quite technical, but if you fancy a challenge you can read it here. Removing padding from your columns would result in one column twice as wide as the others.
Centering an element both vertically and horizontally has always been a challenge. And once again its solutions have always been very hacky.
the current way
The centered element must have both its
left set to 50%,
position: absolute;, and a
transform: translate(-50%, -50%);, while the parent just needs a
As you can see although you get the result, it’s not exactly elegant. You are forced to set
position: absolute; on the centered item, which means it is taken out of the pages flow. This means that the parent acts like as if it has no child at all, which is why a height has to be explicitly set on the parent. More hacks!
the flexbox way
Ok so the Flexbox way doesn’t reduce the code that much yet, with the vendor prefixes in place. But one thing it does do is remove the need to alter positions and use transforms.
Its just as simple as adding
align-items: center; and
justify-content: center; to the parent.
that’s not all folks
Although my experience with Flexbox has been very brief, it is already becoming a core part of my development toolbox. There is so much more that Flexbox can help you achieve and I’m excited to learn more.
Have you got any other great Flexbox solutions? Let us know in the comments!
If you enjoyed the read, drop us a comment below or share the article, follow us on Twitter or subscribe to our #MetaBeers newsletter. Before you go, grab a PDF of the article, and let us know if it’s time we worked together.