Flexibility: Flexbox support for Internet Explorer

Taylor Lovett on December 23, 2015 • 4 Comments

A few weeks ago, we pushed out our newest open source project: Flexibility, a polyfill that back ports Flexbox support to Internet Explorer versions 8 and 9.

Flexbox is one of the most significant advances in front end website layout since the advent of CSS, empowering us to build beautifully responsive and flexible layouts using pure, clean CSS. Here’s a short explanation from a great overview prepared by CSS-Tricks:

The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.

Unfortunately, Flexbox support wasn’t added to Internet Explorer until version 10, leaving older versions – still popular in some corners – out of the Flexbox revolution. This idea didn’t sit well with 10up’er Jonathan Neal, tasked with engineering a beautiful layout for a Fortune 50 forced to contend with supporting older versions. We decided to subsidize his time to see if we could introduce Flexbox support under less-than-ideal browser requirements. The result was Flexibility: a smooth front end experience for older browsers, without compromising our ability to use pioneering layout technology.

Flexibility is available on GitHub and ready for use. The code is licensed under the GNU General Public License version 2, making it free for you to use, distribute, and modify. We’re excited to help push front end engineering forward!