One of my top favorite things about front-end development in the security space — by simple nature of the business — is that old, unsecure browsers are a big no-no. What this means for me is that the users of our tool should be running updated, secure browsers. This in turn, allows me to have more liberty in my usage of the latest CSS has to offer. One of these CSS liberties is known as “flexbox” and with a revamped user interface being built, I’m taking every chance I get to leverage it.
What’s a flexbox and what do you eat it with?
Flexbox is one of the newer specifications in CSS which, probably due to how awesome it is, has already reached some pretty serious compatibility among browsers. Put very simply, “it works everywhere except in old IE”. I’ll get to that point in a bit, and I’ll also skip elaborating on the technical aspects of it (as there are plenty of people who have done that for me), but for now an easy way to describe flexbox in the following real-world examples is by simply expanding the name: they are flexible boxes.
Here’s an element in the revamped interface:
Nothing terribly interesting, it’s basically a box with 4 “columns”: a status, some information, some counts, and a user/date. However, the parent element and each of the 4 columns all enable flexbox with a
display: flex. With that, there are a few things to point out…
The first thing the front-end crowd might catch is the centered vertical alignment of all the content. This is probably one of my favorite features of flexbox. You might have used
line-height to align an icon or even a single line of text before, but probably are also aware that the moment things need to wrap (e.g. single line wraps to 2 or more lines of text) things get nasty. With a simple
align-items: center you can vertically center the content of an element with flexbox activated and be done with it.
The status column (where it says “Running”) has a minimum width of 100 pixels. The column with the heading and e-mail details has a set width of 30%. The other 2 columns have no set widths, but the last one does have a
flex-grow: 1 which will allow it to simply stretch to fill up any extra space that is left in the width of the parent. Flexbox makes this mish-mash of set and automated widths ridiculously easy. Without flexbox, you’d probably need to set each column to float to the left and apply some specific widths so they never wrap onto a 2nd row, with some added work as you check how they behave at lower resolutions.
Speaking of lower resolutions, flexbox helps a lot with this. As mentioned, if I were to use floats I’d either have to use set widths on all columns or have some added work once they begin wrapping around at lower resolutions. Flexbox does its best to fit everything just as I defined it originally. Of course, things can get silly at really low resolutions, and I probably won’t want 4 columns of even width once it gets low, but slap a few media queries to shift around some stuff and everything continues to behave properly.
The 2 biggest drawbacks I’ve faced with using flexbox are IE9 support and the “quirks” of it being new. Unfortunately, IE9 is still around, but hopefully not for much longer. Looking at the future, IE9 will eventually be phased out and then I won’t have to worry about it anymore but for now I do. An interesting thing about flexbox is that it shares a number of similarities with tables which make it a somewhat usable fallback for IE9. Thanks to the
display: table and
display: table-cell properties in CSS, we can get normal divs to behave in a table-like manner, and although not as powerful as flexbox, would be enough to make simple flexbox-using components not become an absolute mess when displayed in IE.
As far as quirks go, because flexbox is new and I’ve yet to learn all its nuances, I’ve come across a few issues while debugging things that leave my head scratching until I realize elements are behaving differently than I’m used to because of flexbox. There has been an occassion or 2 where I also thought using flexbox would help me, but ended up reverting to floats — which yes, despite flexbox being around, still have their purpose in life. This just means I need to keep up practicing with it, until I know how to handle it inside and out.
Overall though, being able to leverage flexbox in a real-world product has been very enjoyable. As a comparison, here is what the component would look like with all the flexbox bits disabled:
Now if only someone would start moving along that Grid Layout spec…