根据W3C CR(显示器:flex等),当前的CSS Flexible Box Layout Module是否有任何polyfill？

Question

Flexiejs.com有用于CSS弹性框的浏览器polyfill,但它基于该主题的早期草案,这与当前的W3C Candidate Recommendation CSS Flexible Box Layout Module不兼容.对于CR中定义的柔性箱,是否有任何填充物,至少是部分填充物？

Answer 1

2014年更新答案

简而言之:在撰写本文时(2014年10月),没有实现W3C候选推荐标准的javascript polyfill.

有2个javascript polyfill实现:

1. Flexie.js自2012年中期以来几乎没有任何更新 - 参见贡献图 - 并且仅支持2009 Flexbox模型,这意味着一组有限的财产.

2. Reflexie.js在撰写本文时(2014年10月)仍然没有受到影响,正如Ilya Streltsyn另一个答案的评论所指出的那样,"正如作者在该项目的主页上所说的那样,它仍然是'Sooooo尚未准备好黄金时段'".最新提交于2012年11月1日...

资源

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

Answer 2

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

flexie.js的作者前段时间提到过他正在更新flexie.js,但从那时起就没有任何出版物.所以很难说它是否或什么时候实际实现.

Answer 3

Chris Coyier有一个很棒的资源:

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

问题是flexbox有三个草稿正在使用中.Chris Coyier的文章讨论了所有三个版本以及如何交叉它们以实现跨浏览器支持.我摘录了下面的相关内容.

用于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;

用于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+ */

用于order:1:

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

他声称支持:

• Chrome任何
• Firefox任何
• Safari任何
• Opera 12.1+
• IE 10+
• iOS任何
• Android任何

我认为Flexbox的性质的其他没有经过修改,所以你可以使用前缀的"标准"设定(-ms,-moz,-webkit,无前缀).