An excerpt from the article “Migrating to Flexbox by Cutting the Mustard” by Bashkim Isai
As front-end developers, the time has come to move away from using CSS floats and dive into the new and exciting world of flexbox. CSS floats are a dated approach to styling layouts; they have been available in Internet Explorer since version 4.0 and workarounds are required to make them malleable (including the clearfix hack and using the nth-child pseudo-class for wrapping columns).
The main topic of this article is how to implement flexbox across multiple browsers considering its fragmentation. If you want to become more familiar with flexbox, there are many good resources available, and I highly recommend the following:
- Are We Ready to Use Flexbox? by Nick Salloum on SitePoint
- A Complete Guide to Flexbox by Chris Coyier on CSS-Tricks
- Flexible box (“Flexbox”) layout in Internet Explorer 10 on MSDN (optional)
By the end of this article, you should be able to:
- Understand which versions of flexbox to target for a responsive website.
-Utilise flexbox via feature detection (cutting the mustard) and provide a fallback for legacy browsers. - Move away from using IE conditional comments in most situations.
- Demonstrate a practical use for flexbox by creating a basic 2×2 grid
with a legacy fallback.