根据 W3C CR（显示：flex 等），当前的 CSS 灵活框布局模块是不是有任何 polyfill？ [关闭]

Posted 2023-03-06

【中文标题】根据 W3C CR（显示：flex 等），当前的 CSS 灵活框布局模块是不是有任何 polyfill？ [关闭]

【英文标题】：Is there any polyfill for current CSS Flexible Box Layout Module as per W3C CR (display: flex etc.)? [closed]根据 W3C CR（显示：flex 等），当前的 CSS 灵活框布局模块是否有任何 polyfill？ [关闭]

【发布时间】：2012-12-05 18:12:23

【问题描述】：

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

【参考方案1】：

2014 年更新答案

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

有 2 个 javascript polyfill 实现：

Flexie.js 自 2012 年年中以来几乎没有任何更新 - see the contribution graph - 仅支持 2009 Flexbox 模型，这意味着一组有限的属性.

Reflexie.js 在撰写本文时（2014 年 10 月）仍未触及，正如 Ilya Streltsyn 在另一个答案的评论 "it's still 'Sooooo not ready for prime-time'" as the author stated on the main page of the project 中指出的那样。最新提交于 2012 年 11 月 1 日...

资源

Flexie.js on Github Reflexie.js on Github

【讨论】：

Flexibility 是另一个适用于 IE8 和 IE9 的 polyfill。

【参考方案2】：

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

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

【参考方案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，无前缀）。

【讨论】：

这很有趣，但不是 polyfill；这是使用 polyfill 的想法的一部分，作者不需要手动编写各种浏览器前缀版本和技巧。此外，它排除了 IE 9 和更早版本，而 Flexiejs 解决了这些问题——只是基于一个过时的草案，因此是个问题。

明白了，一个完整的跨浏览器解决方案当然需要 Javascript 方法。我没有深入研究 Flexie.js 源代码，但应该可以像上面那样添加 css 属性。

Flexie 的作者正在为名为 reFlexie 的新规范开发 polyfill，但它仍然“还没有准备好迎接黄金时段”。

Sitepoint 还有另一篇很棒的 flexbox 文章，里面有很多很棒的资源！