0.0.12 • Published 10 years ago
x-flex v0.0.12
Install
npm install x-flexbower install x-flexBrowser 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
heightortop/bottomproperty 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