Use modernizr to detect whether flex capabilities are present, and provide fallback styles where necessary. Modernizr will add classes like flexbox, no-flexbox, and flexbox-legacy to the html element, so in your styles you can use:
.container {
display: flex;
}
.no-flexbox .container {
display: table-cell;
}
I highly recommend reading through Zoe Gillenwater’s (@zomigi) presentations on the subject, particularly Leveling Up With Flexbox (Smart Web Conference – September 2014)
- slide 21: horizontal navigation spacing >
display: inline-block; - slide 62: pinning elements without flexbox >
display: table-cell; - slide 70,71: aligning forms fallbacks
- slide 88,91: example with and without flex order
Also, in her presentation CSS3 Layout, there are a few good sideby side previews of layouts with and without flexbox:
- slide 73: Using inline-block with flexbox: horizontal form
- slide 79: Using inline-block with flexbox: horizontal navigation
Some of takeaways for me:
- browser support ie10+ is pretty good caniuse
- use auto-prefixr to handle browser prefixes
- use modernizr to provide fallbacks
- “flexbox is not all or nothing” @zomigi