为什么没有适用于旧版浏览器（如IE9）的flexbox polyfill？

Question

是否有一些问题阻碍人们创建它？它是不是太复杂了？

可能只是没有必要吧？

它已经被创建了，只是我找不到吗？

我想象它是一个基于JS的库，并且工作方式如下：

1. 它检查浏览器是否原生支持Flexbox；

2. 如果不支持，则解析CSS并检查元素是否具有Flexbox相关规则；

3. 如果有这样的规则，则尝试通过计算所有子元素的位置和大小，并使用position: absolute;来定位他们来模拟这些规则。

基本上，与Masonry和类似的库做的事情相同，但是使用Flexbox规则。这种实现方式可行吗？

编辑：此问题没有解释为什么无法实现。

- Victor Marchuk

---

可能是重复的问题：是否有任何polyfill适用于当前CSS Flexible Box Layout Module，如W3C CR（display:flex等）？ - Michael Benjamin

Answer 1

实际上有一个库可以完全满足我的需求：https://github.com/jonathantneal/flexibility

它还处于早期开发阶段，但希望不久后就能使用。

- Victor Marchuk

---

你确定吗？你可以在他们的GitHub页面上找到这个：“要在Internet Explorer 8＆9或任何旧版浏览器中开始使用Flexbox，请下载flexibility.js脚本并将其包含在页面的任何位置。” - gnclmorais

最新版本（2.x）与ie9不兼容。我认为1.x版本可以正常工作。 - jlee

Answer 2

“通过JavaScript模拟这些规则”是最难的部分。

1. Flexbox是纯粹的position:static元素，你不能将其移动到position:absolute层（这背后有太多的东西）;
2. Flexbox计算是在所谓的渲染树上进行的，而这个树对JS不可用;

为了让JS用于静态布局目的，浏览器应该有一种机制来连接用户代码和渲染树形成和布局:

div { layout: myFlexManager url(my-layouts.js); }

但是一旦浏览器具备了这样的功能，flexbox就会被抛弃，因为这是有史以来最糟糕和最丑陋的CSS规范 - 社区将提出更好、更简单和更实用的东西。

- c-smile

---

请问，如果我尝试从JS实时实现flex box计算，会出现什么问题？对于旧版本的flex box规范，有polyfills可以使用，如果几年前它们可以做到，为什么现在不能做到呢？ - Victor Marchuk

可以进行一些非常粗略的模拟，是的。但正如您所知，这些尝试并不那么受欢迎。有很多原因。其中一个原因是人们已经使用了这些功能的纯CSS模拟：网格系统、display:table-cell等。请注意：这些都是纯CSS模拟，不需要运行任何JS。 - c-smile

@c-smile，你能否给出一个例子或 jsfiddle，展示在 flexbox 中 position: absolute 不起作用的情况？我相信 position: absolute 有其自身的特性，不遵守 flexbox 的规则...并且也不一定必要。 - Aamir Shahzad

https://dev59.com/QFgR5IYBdhLWcg3wqO1W - Aamir Shahzad

为什么Flexbox是“有史以来最糟糕和最丑陋”的规范？ - Machado

由于它破坏了CSS 2.1中建立的盒模型当你使用flexbox时，当你说width:100px并不意味着元素的宽度将为100像素。灵活性应该由flex单位来定义，而不是属性，所以如果你想要边距是可变的，可以使用width:*;和margin-left:2*; width:1*。 - c-smile