README
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
- Container requires explicit
height
ortop
/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