A grid-shaped Flexbox hole
I love Flexbox. All the sites I've worked on for the last year have little Flexbox enhancements scattered over them. I was feeling quite pleased with myself for a while, until I went too far. I fell down a grid-shaped Flexbox hole.
Using Flexbox for page layout turned out to be a lot of fuss. Modernizr saved me, but it still didn't feel like an easy ride.
I usually use Flexbox to make small enhancement to components. So, fully-featured browsers will make use of Flexbox code to improve its appearance, and browsers which don't understand the code won't. Since they are only small enhancements, nothing breaks if Flexbox isn't supported.
However, for grids and layout, it isn't so simple. My issues were largely down to using the
flex-wrap property to build a grid containing multiple rows of items. A notable issue is that some older browsers support Flexbox, but not the
flex-wrap property (e.g. Flexbox v22-27). So they read the Flexbox code intended for fully-featured browsers, but don't understand the
flex-wrap property in that code. When flex-wrap is understood, items fit nicely into their container like this:
When flex-wrap is not understood, items don't wrap and go off the page:
Now, I realise that the number of people using Firefox v22-27 is very small because Firefox browsers automatically update, but I didn't want that small number of people to be unable to view items in the grid. This is where Modernizr came in really useful because I could target those specific cases.
Modernizr has four separate Flexbox tests, outputting eight different classes to the
<html> tag. Classes for flexbox support include:
flexwrap. Classes for no flexbox support are prepended with 'no-'. These can then be used to target browsers with different ranges of Flexbox support (or lack of).
What I found most difficult and time-consuming was getting my head around the many inconsistencies between the levels of Flexbox support in different browsers. Using Modernizr actually highlighted it even more for me because the classes in the HTML element varied. Flex-wrap isn't the only property unsupported by some browsers. Even some of the more recent browsers have different levels of support for Flexbox properties. I'm also referring to the many different prefixes. I used autoprefixer, but it didn't always pick up prefixes for much older, less used browsers. It sometimes took some time to figure out which prefixes were required for each browser.
My next goal is to get to grips with CSS Grid layout module because I think it will solve my issues with Flexbox grids. After this experience, I'm pleased that the Grid layout module has been in editors draft and behind a flag for a while. Hopefully there won't be as many inconsistencies when it is finally ready for use.
I love Flexbox for what it's good at, but I think i'll leave grids to Grid. Rachel Andrew gives a great explanation of the difference between Flexbox and Grid:
Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.