Flexbox for page layout?
I am trying to figure out if I start using flexbox for my website / webapp layout design, not floating divs etc.
But I am getting mixed messages. On one website, they say flexbox is now the holy grail for page layout: http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/
That said, Tab Atkins, the guy who created the css3 flex spec, has a page called "Why flexboxes are not suitable for page layout" http://www.xanthir.com/blog/b4580
I watched a video about this: http://vimeo.com/98746172
So my conclusion is that it means it shouldn't be used for complex page layouts. And this display: the grid will fit better. However, the grid will likely take several more years to cover all popular browsers.
So my question is, at the moment, is it better for flexbox to create page layouts than the current solutions (div floats, display: table-cell, inline-blocks, etc.) and flexbox, what should I use until the grid comes out?
ps I know flexbox is not compatible with older browsers. But I'm talking hypothetically here because this question just suggests that this is not a problem.
source to share
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.
The tab did a few good things, but that doesn't mean flexbox isn't the best solution we currently have for certain layouts.
Simplicity
Will flexbox make your HTML or CSS more concise, easier to understand, or more convenient? Using flexbox can allow you to get rid of hacks like removing whitespace on inline-block elements, or additional markup is often required display: table
.
Performance
Flexbox elements are slightly slower to render than floated or inline-block elements. However, if you don't have hundreds of flexboxes on your page, this is one of the last things you need to think about when optimizing your page speed. Sometimes using flexbox can reduce the amount of CSS by a large margin.
Flexibility
Flexboxes are very flexible (no pun intended). You can do things like reordering the order of elements, which can be very difficult or impossible with other methods.
When doing simple things like a two column layout, I'll still use float. That said, if you want the functionality that flexbox offers for your layout, or it simplifies your HTML or CSS, then go for it! Grid layouts may be better in the long run, but they are not yet implemented in most browsers.
source to share