The new Box Model: Flexbox

Remember the (not so) good old days of the web when we layed out our pages using tables</code> (nested within more tables) and those really cool framesets</code>? We are so much better now that we have the box model, a more elegant and structured way to accomplish this task. The box model is here to stay! ... Isn't it?

Well, it turns out that laying out pages with floats</code> and clearfixes</code> is not so elegant after all. But it's not our fault! We did what we can with what we've got, and we didn't have anything better at the time. Well, now we do.

<h2>What is Flexbox?</h2>
You probably heard about it. The Flexible Box Model (Flexbox for short) is a way of thinking about layout, combined with a handful of new CSS properties, that will change the way we start coding our web pages.

The best thing about the Flexbox is that it is optimized for UI design, meaning that we're not going to use something that was designed for a different purpose (tables, floats), or applying "hacks" to make it work. We're gonna be using the right tool for the job, and it comes with some benefits:

<ul>
<li><b>The childs of a "flex" container grow to use the available space, or shrink to avoid overflow</b><br/>Have you ever tried making equal height columns with CSS? Then you know it's a pain.</li>
<li><b>Easy manipulation of both vertical and horizontal alignment</b><br/>I don't need to tell you how difficult it is to center an element vertically.</li>
<li><b>Order and orientation</b><br/>You will not only get rid of the float: left;</code>, float: right;</code> hacks, but you will also be able to visually re-order your elements (i.e. taking your header navigation to the bottom of the page in a responsive design) without touching a line of your HTML nor relying on heavy Javascript.</li> </ul>

And there's more...
But for the sake of keeping this as a "tip" instead of a fully featured article, I'm gonna let you take it from here. Just two advices:

For the most recent and complete information about Flexbox, you should check the <a href="http://dev.w3.org/csswg/css3-flexbox/" target="_blank">W3C Editor's Draft</a> (updated 28th August 2012). It's long, but it's worth it.

If you preffer to Google around looking for explained articles, please feel free to do so, but keep in mind a very important thing:
Flexbox has been around for at least 4 years now, and it has suffered a lot of changes in its spec, resuling in a lot of really good, but outdated articles.
Read <a href="http://css-tricks.com/old-flexbox-and-new-flexbox/" target="_blank">this Chris Coyier post</a> to distinguish between "old" Flexbox and "new" Flexbox posts.

Happy Flexboxing!