Flexbox for Page Layout?

Question

I'm trying to get an idea if I should start using flexbox for website/webapp layout design as opposed to floating divs, etc.

But I'm getting mixed messages. On one website they're saying that flexbox is now the "holy grail" for page layout: http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/

Yet Tab Atkins, the guy that created the css3 flex spec has a page called "Why flexboxes Aren't good for page layout" http://www.xanthir.com/blog/b4580

I watched a video about this: http://vimeo.com/98746172

So my conclusion is that he means that it shouldn't be used for complex page layouts. And that display:grid would be better suited. However, grid will probably take a few more years to reach all popular browsers.

So my question is, as of right now, is flexbox better for creating page layouts than the current solutions out there (div floats, display:table-cell, inline-blocks, etc) and is flexbox what I should use until grid comes out?

p.s I know that flexbox isn't compatible with older browsers. But I'm talking hypothetically here, for this question let's just assume that isn't a problem.

Answer 1

I think you misunderstood Philip on Solved by Flexbox. He didn't say flexbox was the holy grail for layouts, the layout itself is called the holy grail.

Tab made some good points, but that doesn't mean that flexbox is not the best solution we currently have for certain layouts.

Simplicity

Will a flexbox make your HTML or CSS more concise, easier to understand or maintain? Using flexbox could allow you to do away with hacks like removing the whitespace on inline-block elements or the extra markup often need with display: table.

Performance

Flexbox elements are a little slower to render than floated or inline-block elements. However, unless you have hundreds of flexboxes on your page this is one of the last things you need to think about when optimising your page speed. Sometimes using a flexbox can reduce the amount of CSS by a large margin.

Flexibility

Flexboxes are very flexible (pun not intended). You can do things like rearranging the order of elements which might be very hard or impossible with other methods.

When doing simple things like a two column layout I would still use a float. That said, if you need the functionality that flexbox offers for your layout or it simplifies your HTML or CSS then go for it! Grid layouts may be better suited in the long run, but they have not been implemented in most browsers yet.