Flexibility is a polyfill for the Flexible Box Layout, commonly known as Flexbox. With Flexibility, you get to design beautiful, flexible layouts on the web without sacrificing the experience in older Internet Explorer browsers.

Flexbox is used lay out, align, and distribute elements in a container, even when their size is unknown or dynamic. To better understand Flexbox, read Chris Coyier’s excellent Complete Guide to Flexbox.

To start using Flexbox in Internet Explorer 8 & 9, download the flexibility.js script and include it anywhere on your page.

<script src="flexibility.js"></script>

Next, add a -js-display: flex declaration before any display: flex declarations in your CSS, or use PostCSS Flexibility to automate this during your build process.

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

Flexibility will automatically detect any flex-affected elements on the page and restyle them accordingly in Internet Explorer 8 & 9.

To learn more about Flexibility, read the support section.

If you experience an issue, read the contributing section before creating an issue.