Flexbox all the things

CSS Flexible Box Layout module is one of the new CSS features that becomes usable right now thanks to the faster evolution of web browsers. The best quick description of flexbox is probably the very first sentence of the specifications:

The specification describes a CSS box model optimized for user interface design.

And yeah after using it at work on PlatformUI or on the new version of this blog, I can definitively say: flexbox is awesome. At least, it helps solving some very basic user interface problems. Have you ever dreamed of vertically centering something in CSS? With flexbox, you can :-)

Flexbox all the
Taken from Meme Generator

Caniuse.com reports flexbox to be somehow supported by all major browsers and even from Internet Explorer from version 10! So if you don't have/want to support Internet Explorer 9, it's definitively a good choice.

That said, from a practical point of view, the somehow in the previous paragraph is an important fact. It actually means that Internet Explorer 10 implements an old version of the specification with a bit different syntax with the -ms- prefix (often refered as the 2012 syntax) and Internet Explorer 11 has some bugs but to be fair, others browsers also have bugs on flexbox. And as usual, you also need to add the -webkit- prefix as well (yes iOS Safari, I'm looking at you). If we take the very first example of the specification, it should be adapted to the following code to be working in the current browsers:

#deals {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; /* from the original example */
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap; /* from the original example */
.sale-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; /* from the original example */
  -webkit-flex-flow: column;
      -ms-flex-flow: column;
          flex-flow: column; /* from the original example */
.sale-item > img {
  -webkit-box-ordinal-group: 0;
   -webkit-order: -1;
  -ms-flex-order: -1;
           order: -1; /* from the original example */
   -webkit-align-self: center;
  -ms-flex-item-align: center;
           align-self: center; /* from the original example */
.sale-item > button {
  margin-top: auto; /* from the original example */

As you can see, this results in a much longer stylesheet with more workarounds than initial code! Of course with a good memory and a bit of bravery, this can be done by hand but this is typically the kind of task that can and should be automated. To be honest, the previous code snippet was generated by Myth and you can find several tools to do the same transformation like Pleeease or cssnext. So pick one and just use it. I know it's yet another tool in your toolbox but it will be useful not only for flexbox related code but also for various others non fully supported CSS features.

So, where to start with flexbox? So far, the best flexbox guide I've seen is A Complete Guide to Flexbox available in CSS-Tricks.com which also recently published Designing A Product Page Layout with Flexbox to see how flexbox can be practically used. Also, Solved by Flexbox is a great online resource and I'm sure there are tons of others.