Migrating to Flexbox by Cutting the Mustard

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:

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.

Continue reading this article on Sitepoint …

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.