F L E X B O X

Today

The days of floats and margin trickery are finally behind us, as CSS furnishes developers with new and improved properties perfect for those delicate layouts. Layout features such as vertical alignment, evenly distributed spacing, source-order control and other patterns such as "sticky" footers are quite effortless to achieve with Flexbox.
- Dennis Gaebel Jr

When HTML and CSS were originally created they were meant for documents not applications. CSS’s ability for page layout had a difficult start. Several intricate hacks developed to solve basic problems like floats for a two-page layout and display: table to lay things out horizontally. These different methods would all do virtually the same thing in very different ways and if one method did not work, you would need to know another one. Flexbox fixes a lot of these problems. It has four parts: direction, alignment, ordering, and flexibility. Typically, direction on a page goes from top to bottom. With Flexbox, direction can go top to bottom, bottom to top, left to right, and right to left. All directions render the same way. In CSS alignment can be a problem making it difficult to vertically center something. Flexbox solves this with one property. Flexbox lets you put your source in whatever order you want to. The order can be arbitrarily reordered in the document. Flexbox’s flexibility derives from its ability to tell an item to take up whatever space is leftover. This can be hacked with hidden overflow elements and positioning them next to a float but it only works in a few cases.

Each version of Flexbox addresses new issues to solve. Members of the W3C Working Group present an issue with the spec, provide a proposal, and after other members review the issue they decide on how to resolve it. As Flexbox is continually updated, it will progress towards an ideal flexible grid layout module close to Dilger’s expectation. Currently, Flexbox is not the be-all end-all of layout modules. A combination of grid and Flexbox is ideal for creating the best layout, using the best features of each. Flexbox can be used by itself to solve many layout problems such as the Holy Grail Layout.

The Holy Grail layout has a header across the top of the page, a footer across the bottom, and in between are three columns: navigation, content, and sidebar. The main aims of the Holy Grail Layout are:

This is a common layout and the current ways of creating it have drawbacks and there are obstacles in the way of creating it. Some of these obstacles include: non-semantic use of HTML, incorrect rendering of content, limited capabilities of CSS for page layout, etc. Because of its difficulty in creation, finding an optimal implementation eludes to searching for the Holy Grail, hence the name.
Holy Grail Layout example:

See the Pen Holy Grail Layout by Anna Irish (@AnnaIrish) on CodePen.

Code written by: Michael Park

browsers

In 2014, Colin Toh, a JavaScript Developer, wrote a blog post on using <table> for layouts. At the end he has a section titled "Are you kidding? CSS Flex can solve everything!" suggestion what someone might think after looking through the tedious coding of layouts using <table>. His response then was that although Flexbox can solve all the layout problems he mentioned, its lack of support in IE8 and IE9 was a deal breaker. Flexbox's current spec is a W3C candidate recommendation. The spec is implemented in all 5 major desktop browsers: Chrome, Firefox, Safari, Internet Explorer 10+, and Opera 12.1+.