basarane / flexibility

Use flexbox while supporting older Internet Explorers

Home Page:https://10up.github.io/flexibility/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Flexibility

NPM Version Build Status

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.

Screenshot of Flexibility

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.

About

Use flexbox while supporting older Internet Explorers

https://10up.github.io/flexibility/

License:MIT License


Languages

Language:HTML 70.7%Language:JavaScript 24.6%Language:CSS 4.7%