Using Flexbox Now
by Ian Ebden
The top portion of these styles is taken from Chris’ article, I’ve just added some background colours to show up the columns better in the browser. The bottom half is where we use our conditional classes, and do our float fallback.
Firstly (for <IE9) we get the <article>, <aside> and <nav> displaying as block-level elements, just as they would in modern browsers. Next, since <IE10 will simply ignore all our earlier Flexbox declarations, we can use conditional classes (.lt-ie10) to target those browsers and use the old float method for layout. Job done.
A quick cross-browser test in BrowserStack came up trumps (apart from a width issue in Firefox which I’m looking into). So if you’re okay about mixing old and new Flexbox syntaxes in your styles (and why wouldn’t you be?), then now might be the time to start using Flexbox on live projects.
Thanks for reading