kevinrodbe/flexibility

Use flexbox while supporting older Internet Explorers

Flexibility

Flexibility is a polyfill for Flexible Box Layout Module Level 1. Use it to design beautiful, flexible layouts on the web without sacrificing the experience in older Internet Explorer browsers.

Flexbox provides an efficient way to lay out, align, and distribute items in a container, even when their size is unknown or dynamic. To better understand Flexbox, take a moment to read Chris Coyier’s excellent Complete Guide to Flexbox.

To start using Flexbox in Internet Explorer 8 & 9, add a -js-display display property to your CSS file.

.container {
	-js-display: flex;
	display: flex;

	align-contents: stretch;
}

While Flexibility is still in active development, it can already do so much. Therefore, it has been released even in an incomplete state. Your contributions, feedback, and encouragement are greatly appreciated.

How to use it

Download the dist/flexibility.js script and include it somewhere on your page. Flexibility will automatically detect any flex-affected elements on the page and restyle them accordingly in Internet Explorer 8 & 9.

How it works

The secret to flexibility is leveraging proprietary features in older Internet Explorers.

Internet Explorer 8 & 9 have a proprietary feature called currentStyle which returns the raw CSS applied to an element. While known properties (like display) are sanitized to return only valid values, “unknown” properties like align-contents, justify-content, and flex return exactly what they received. As a result, flex properties can be easily read from any element without fetching or parsing any stylesheets. In short, your cross domain CSS is safe.

Once all of the flex values are processed, basic flex display is applied to the document. Finally, careful measurements are taken of all flexbox elements, and new style declarations are written to simulate whatever flexbox would have done natively.

Overwriting style declarations can be tricky, especially when inline styles are considered, which is why another IE proprietary feature called runtimeStyle is used to assign new declarations without compromising inline styles. In short, no messy style attributes.

License

Flexibility is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.