26

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

4

3 回答 3

16

2014年更新的答案

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

有 2 个 javascript polyfill 实现：

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

  2. Reflexie.js在撰写本文时（2014 年 10 月）仍然没有受到影响，正如作者在项目主页上所说的那样，Ilya Streltsyn正如另一个答案的评论中指出的那样，“它仍然'Sooooo not ready for prime-time'” 。最新提交于 2012 年 11 月 1 日...

资源

于 2014-10-03T12:21:43.240 回答
11

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

flexie.js 的作者前段时间提到他正在努力更新 flexie.js，但从那时起就没有任何发布过。所以很难说它是否或何时会真正实现。

于 2013-07-09T11:56:03.420 回答
10

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;

他声称支持：

  • 铬任何
  • 火狐任何
  • Safari 任何
  • 歌剧 12.1+
  • IE 10+
  • iOS 任何
  • 安卓任何

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

于 2013-03-15T05:24:30.397 回答