Stop using CSS grids, use Flexbox!

I bet you didn't see this one coming, ha!

Indeed, Flexbox is one amazing CSS property that opens the layout possibilities to new horizons. Here are a few things about Flexbox:

• Its browser support is perfect in modern browsers.

• IE8 and IE9 don't support it. But no worries, addressing these two browsers is very simple using the conditional classes technique mentioned in Chapter 3, Mobile-first or Desktop-first?

• IE10 only supports the 2012 syntax, but Autoprefixer (within Prepros) takes care of this old vendor prefixing automatically for us.

• We need to be careful when using Flexbox because the old display: box; syntax causes the browser to do a multi-pass in the layout, deteriorating the performance.

• In contrast, the new/current syntax display: flex; has no impact on performance whatsoever. Browser performance issues have now been addressed since the old syntax, so we should be in good shape.

Tip

Paul Irish and Ojan Vafai explain this very well in the post Flexbox...