25

Flexiejs.com has browser polyfill for CSS flex boxes, but it is based on an earlier draft on the topic, which is incompatible with the current W3C Candidate Recommendation CSS Flexible Box Layout Module. Is there any polyfill, at least partial, for flex boxes as defined in the CR?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390

3 Answers3

16

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

Adriano
  • 19,463
  • 19
  • 103
  • 140
11

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.

snjesko
  • 158
  • 1
  • 5
10

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).

chowey
  • 9,138
  • 6
  • 54
  • 84
  • 20
    That’s interesting, but not a polyfill; it’s part of the very idea of using polyfills that authors do not need to manually write various browser-prefixed versions and tricks. Moreover, it leaves IE 9 and older out, whereas Flexiejs addresses them – just based on an obsolete draft, hence the question. – Jukka K. Korpela Mar 15 '13 at 05:34
  • Got it, a Javascript approach would of course be necessary for a full cross-browser solution. I have not dived into the Flexie.js source, but it should be possible to add the css properties as above. – chowey Mar 15 '13 at 05:43
  • 2
    The author of Flexie is working on the polyfill for the new spec, called [reFlexie](https://github.com/doctyper/reflexie/tree/develop), but it's still 'Sooooo not ready for prime-time'. – Ilya Streltsyn Jul 09 '13 at 12:12
  • 1
    [Sitepoint](http://www.sitepoint.com/are-we-ready-to-use-flexbox/) has also another great flexbox article full of awesome resources! – falsarella Jan 07 '16 at 12:38