Javascript 根据 W3C CR（显示：flex 等），当前的 CSS 弹性框布局模块是否有任何 polyfill？

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

提问by Jukka K. Korpela

Flexiejs.comhas 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?

Flexiejs.com有用于 CSS 弹性框的浏览器polyfill，但它基于该主题的早期草案，与当前的 W3C 候选推荐CSS 弹性框布局模块不兼容。对于 CR 中定义的 flex 框，是否有任何 polyfill，至少是部分 polyfill？

采纳答案by snjesko

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

目前没有实现 W3C 候选推荐标准的 polyfill。

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.

flexie.js 的作者前段时间提到他正在更新 flexie.js 但此后一直没有发布任何内容。所以很难说它是否或何时会真正实现。

回答by Adrien Be

2014 updated answer

2014年更新的答案

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

简而言之：在撰写本文时（2014 年 10 月），还没有实现 W3C 候选推荐标准的 javascript polyfill。

There are 2 javascript polyfill implementations:

有 2 个 javascript polyfill 实现：

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

2. Reflexie.jsis still untouched at the time of writing (2014 Oct), and as pointed out by Ilya Streltsynin 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...

1. Flexie.js自 2012 年年中以来几乎没有任何更新 -请参阅贡献图- 并且仅支持2009 Flexbox 模型，这意味着一组有限的属性。

2. Reflexie.js在撰写本文时（2014 年 10 月）仍然没有受到影响，正如Ilya Streltsyn在另一个答案的评论中所指出的那样，正如作者在该项目的主页上所说的那样，“它还没有准备好迎接黄金时段”。最新提交于 2012 年 11 月 1 日...

Resources

资源

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

• Github 上的 Flexie.js
• Github 上的 Reflexie.js

回答by chowey

There is a fantastic resource by Chris Coyier at:

Chris Coyier 提供了一个很棒的资源：

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

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.

问题是 flexbox 使用了三个草稿。Chris Coyier 的文章详细介绍了所有三个版本以及如何将它们交错以实现跨浏览器支持。我摘录了下面的相关部分。

For display:flex:

对于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:

对于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:

对于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

• 铬任何
• 火狐任何
• Safari 任何
• 歌剧 12.1+
• 浏览器 10+
• iOS 任意
• 安卓任意

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

我认为其余的 flexbox 属性没有经过修改，因此您可以使用“标准”前缀集（-ms, -moz, -webkit, 无前缀）。