是否有任何 javascript 代码（polyfill）可以启用 Flexbox（2012，css3），例如modernizr？

Posted 2023-03-06

【中文标题】是否有任何 javascript 代码（polyfill）可以启用 Flexbox（2012，css3），例如modernizr？

【英文标题】：Are there any javascript code (polyfill) available that enable Flexbox (2012, css3), like modernizr?

【发布时间】：2013-01-01 09:48:06

【问题描述】：

我正在寻找任何像modernizr（实际上没有）为“旧浏览器”（一个polyfill）启用flexbox的javascript库。

是的，我知道这是一个非常新的功能（事实上“没有”是一个有效的答案），但我希望有这样的东西，我总是很难水平+垂直居中，这真的会帮助并缩短工作时间。

我的意思是这个 flexbox：http://weblog.bocoup.com/dive-into-flexbox/（最新的）

【问题讨论】：

您希望支持哪些旧版浏览器？

不太旧，我只用 IE9、firefox 和 chrome 都是最新版本。对于旧版浏览器，“更新”是关键字。

【参考方案1】：

这可能是too early。 WebKit 最近才实现它，根本没有任何移动 WebKit 支持的迹象，Opera 刚刚发布了对它的支持，而 Gecko 的实现仍处于 alpha 阶段。 IE？哈。

但据我所知，不，新的 flexbox 没有 polyfill。 Flexie 支持旧的 flexbox，并有一个 ticket 开放以支持新语法......也许你可以帮他们一把？

我想你总是可以使用旧的 flexbox，但是你已经过时了。糟糕的情况。

【讨论】：

是的，绝对糟糕的情况。我会再等一天，然后我会将您标记为答案（我不知道今晚是否有开发人员会创建它：P）

【参考方案2】：

您将不得不创建自己的。 http://www.sitepoint.com/detect-css3-property-browser-support/ 有一个标题为“滚动你自己的检测代码”的部分

基本上你需要这样的东西：

// detect CSS display:flex support in JavaScript
var detector = document.createElement("detect");
detector.style.display = "flex";
if (detector.style.display === "flex") 
    console.log("Flex is supported");

else

    console.log("Flex is not supported");

对此进行扩展并创建一个函数：

function DetectDisplayValue(val)

  // detect CSS display:val support in JavaScript
  // 
  var detector = document.createElement("detect");
  detector.style.display = val;
  if (detector.style.display === val) 
    console.log("Display value: " + val + " is supported");
  
  else
  
      console.log("Display value: " + val + " is not supported");
  

【讨论】：

我认为问题是要求 polyfill，而不仅仅是检测是否存在支持

哦，我明白了，OP 要求的是 Flexbox 实现，而不是类似 Modernizr 的检测。

是的，对不起，我要求实现