Is there any polyfill for current CSS Flexible Box Layout Module as per W3C CR (display: flex etc.)? [closed]

Answer 1

There's currently no polyfill that implements the W3C Candidate Recommendation.

The author of flexie.js mentioned some time ago that he was working on updating flexie.js but there has not been anything published since then. So it's hard to say if or when it will actually materialize.

Answer 2

2014 updated answer

In short: at the time of writting (2014 Oct), there is no javascript polyfill that implements the W3C Candidate Recommendation.

There are 2 javascript polyfill implementations:

1. Flexie.js barely had any update since mid 2012 - see the contribution graph - and only support the 2009 Flexbox model, that means a limited set of property.

2. Reflexie.js is still untouched at the time of writing (2014 Oct), and as pointed out by Ilya Streltsyn in another answer's comment, "it's still 'Sooooo not ready for prime-time'" as the author stated on the main page of the project. Latest commit was made on 1 Nov 2012...

Resources

• Flexie.js on Github
• Reflexie.js on Github

Answer 3

There is a fantastic resource by Chris Coyier at:

http://css-tricks.com/using-flexbox/

The problem is there are three drafts in use for flexbox. Chris Coyier's article goes over all three versions and how to interleave them for cross-browser support. I have excerpted the relevant bits below.

For display:flex:

display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;      /* TWEENER - IE 10 */
display: -webkit-flex;     /* NEW - Chrome */
display: flex;

For flex:1:

-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1;         /* OLD - Firefox 19- */
width: 20%;               /* For old syntax, otherwise collapses. */
-webkit-flex: 1;          /* Chrome */
-ms-flex: 1;              /* IE 10 */
flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

For order:1:

-webkit-box-ordinal-group: 1;  
-moz-box-ordinal-group: 1;     
-ms-flex-order: 1;     
-webkit-order: 1;  
order: 1;

He claims support for:

• Chrome any
• Firefox any
• Safari any
• Opera 12.1+
• IE 10+
• iOS any
• Android any

I think the rest of the flexbox properties have not undergone revisions, so you can just use the "standard" set of prefixes (-ms, -moz, -webkit, unprefixed).