x-flex

Install

npm install x-flex

bower install x-flex

Browser Support

IE 10	IE 11	FF 25	FF 26	Ch 31	Ch 32	Sf 6	Sf 7
.flex-x	✓	✓	✓	✓	✓	✓	✓
.flex-row	✓	✓	✓	✓	✓	✓	✓
.flex-row-reverse	✓	✓	✓	✓	✓	✓	✓
.flex-column	✓1	✓	✓	✓	✓	✓	✓
.flex-column-reverse	✓	✓	✓	✓	✓	✓	✓
.flex-order-x	✓	✓	✓	✓	✓	✓	✓
.flex-wrap	✓	✓	✗	✗	✓	✓	✗
.flex-wrap-reverse	✓	✓	✗	✗	✗	✓	✗
.align-items-start	✓	✓	✓	✓	✓	✓	✓
.align-items-end	✓	✓	✓	✓	✓	✓	✓
.align-items-center	✓	✓	✓	✓	✓	✓	✓
.align-items-baseline	✓	✓	✓	✓	✓	✓	✓
.align-items-stretch	✓	✓	✓	✓	✓	✓	✓

Heads up

1. Container requires explicit height or top/bottom property if it has flexed children.

Further reading

• 2009 spec (w3.org)
• 2011 spec
• 2012 spec (latest)
• “Old” Flexbox and “New” Flexbox (css-tricks.com)
• Compatibility Table for Flexible Box Layout Module (caniuse.com)
• Some flex bugs in IE11 (codepen.io)
• A Complete Guide to Flexbox
• Solved by Flexbox