Use flexbox for laying out columns

[kaelig]

Pros

• Allows equal-height columns
• Vertical centering is made easy in modern browsers
• Still works in IE 8 and 9, using the fallback
• According to Paul Lewis, a flexbox grid should be faster to paint than using floats in modern browsers

  Cons

• Browsers that don't support flex-wrap may have layout issues in some edge cases. That said, my tests in IE10 worked perfectly well.

Thanks to @raphaelgoetter for his help.

[raphaelgoetter]

Hi and thanks to you !

According to Paul Lewis, a flexbox grid should be faster to paint than using floats in modern browsers

Is there any source of this hypothesis ?

Some link on the subject :

• https://developers.google.com/web/updates/2013/10/Flexbox-layout-isn-t-slow
• http://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/
• http://blogs.igalia.com/jfernandez/2015/06/24/performance-on-grid-layout/

[kaelig]

According to Paul Lewis, a flexbox grid should be faster to paint than using floats in modern browsers

Is there any source of this hypothesis ?

I built UI tests that could support this but it was very hard to give statistical credit to a few milliseconds difference.

A few other sources:

@paulirish said https://twitter.com/paul_irish/status/514436079865188352

Blink engineers will tell you that (new) flexbox is the most performant layout mechanism we have

@paullewis said https://twitter.com/aerotwist/status/618778842346471424

In my experience flex outweighs floats, but as Jake said: test. And yeah, grid would be finer.

[AlbertoElias]

lgtm!