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-column¹
• .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

¹ 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

• Solved By Flexbox
• Input Add-ons

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