Introducing Flexbox
Flexbox addresses the shortfalls in each of the aforementioned display mechanisms. Here's a brief overview of its super powers:
- It can easily vertically center contents
- It can change the visual order of elements
- It can automatically space and align elements within a box, automatically assigning available space between them
- It can make you look 10 years younger (probably not, but in low numbers of empirical tests (me) it has been proven to reduce stress)
The bumpy path to Flexbox
Flexbox has been through a few major iterations before arriving at the relatively stable version we have today. For example, consider the changes from the 2009 version (http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/), the 2011 version (http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/), and the 2014 version we are basing our examples on (http://www.w3.org/TR/css-flexbox-1/). The syntax differences are marked.
These differing specifications mean there are three major implementation versions. How many of these you need to concern yourself with depends on the level of browser support you need.
Browser support for Flexbox
Let's get this out of the way up front: there is no Flexbox support in Internet Explorer 9, 8, or below.
For everything else you'd likely want to support (and virtually all mobile browsers), there is a way to enjoy most (if not all) of Flexbox's features. You can check the support information at http://caniuse.com/.
Before we get stuck into Flexbox, we need to take a brief but essential tangent.
It's my hope that once you have seen a few examples of Flexbox, you will appreciate its utility and feel empowered to use it. However, manually writing all the necessary code to support each of the different Flexbox specifications is a tough task. Here's an example. I'm going to set three Flexbox related properties and values. Consider this:
.flex {
display: flex;
flex: 1;
justify-content: space-between;
}
That's how the properties and values would look in the most recent syntax. However, if we want support for Android browsers (v4 and below) and IE 10, here is what would actually be needed:
.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
It's necessary to write all that because in the last few years, as browsers made experimental versions of new functionality available, they did so with a 'vendor prefix'. Each vendor had their own prefix. For example -ms- for Microsoft, -webkit- for WebKit, -moz- for Mozilla, and so on. For every new feature this meant it was necessary to write multiple versions of the same property; the vendor prefixed versions first, and the official W3C version at the bottom.
The result of this spell in web history is CSS that looks like the previous example. It's the only way to get the feature working across the widest number of devices. Nowadays, vendors rarely add prefixes but for the foreseeable future we must live with the reality of many existing browsers still requiring prefixes to enable certain features. This brings us back to Flexbox, an extreme example of vendor prefixing thanks to not just multiple vendor versions but also different specifications of the feature. And understanding and remembering everything you need to write in the current format and each previous format is not a whole lot of fun.
I don't know about you, but I'd rather spend my time doing something more productive than writing out that little lot each time! In short, if you intend to use Flexbox in anger, take the time to setup an auto-prefixing solution.
For the sake of your sanity, to accurately and easily add vendor-prefixes to CSS, use some form of automatic prefixing solution. Right now, I favor Autoprefixer (https://github.com/postcss/autoprefixer). It's fast, easy to setup and very accurate.
There are versions of Autoprefixer for most setups; you don't necessarily need a command line based build tool (for example, Gulp or Grunt). For example, if you use Sublime Text, there is a version that will work straight from the command palette: https://github.com/sindresorhus/sublime-autoprefixer. There are also versions of Autoprefixer for Atom, Brackets, and Visual Studio.
From this point on, unless essential to illustrate a point, there will be no more vendor prefixes in the code samples.