Phil Giles

flex(box) those css muscles

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.

columns

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.

There is also the clearfix and box-sizing hacks that need to be applied to get the columns working.



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

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 top and left set to 50%, position: absolute;, and a transform: translate(-50%, -50%);, while the parent just needs a position: relative;.



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.

blog comments powered by Disqus