Install
npm install x-flex
bower install x-flex
Browser Support
Fully supported
- .flex
- .flex-x
- .flex-order-x
- .flex-row (default)
- .flex-row-reverse
- .flex-column1
- .flex-column-reverse
- .align-items-stretch (default)
- .align-items-start
- .align-items-end
- .align-items-center
- .align-items-baseline
- .align-content-end
- .justify-content-start (default)
- .justify-content-end
- .justify-content-center
- .justify-content-space-between
- .justify-content-space-around
1 Heads up: In IE10, a .flex-column container requires an explicit height
or top
/bottom
property if it has flexed children.
Partially supported
| IE 10 | IE 11 | FF 28 | FF 29 | Ch 31 | Ch 32 | Sf 6 | Sf 7 --- | --- | --- | --- | --- | --- | --- | --- | --- .inline-flex | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✓ .flex-wrap | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✓ .flex-wrap-reverse | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ .align-content-start | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✓ .align-content-center | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✓ .align-content-space-between | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✓ .align-content-space-around | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✓ .align-content-stretch | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✓ .align-self-start | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✓ .align-self-end | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✓ .align-self-center | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✓ .align-self-baseline | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✓ .align-self-stretch | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✓
Examples
Further reading
- July 2009 spec (w3.org)
- November 2011 spec
- March 2012 spec
- September 2012 spec (latest)
- Compatibility Table for Flexible Box Layout Module (caniuse.com)
- Some flex bugs in IE11 (codepen.io)
- “Old” Flexbox and “New” Flexbox (css-tricks.com
- A Complete Guide to Flexbox (css-tricks.com)
- Solved by Flexbox (github.io)
- flexplorer (bennettfeely.com)
- flexy boxes (the-echoplex.net)
- Flexbox — fast track to layout nirvana? (dev.opera.com)
- Advanced cross-browser flexbox (dev.opera.com)
- Working with flexbox: The new specification (adobe.com)
- Flexbox / Flexible Box Layout CSS Reference (ptb2.me)
- Flexercise Introduction
- Flexercise for seniors