4

如果支持，我计划在我的布局中实施 flexbox 解决方案，并且我将检测 CSS3 的@support{...}查询是否支持它们。

但是我应该测试什么是支持的？由于功能@support查询寻找对给定样式的支持，然后在支持时实现样式，我应该寻找什么支持？

换句话说，所有 flexbox 的实现都支持什么风格？

我认为这将display:box;适用于 2009 年的 flexbox 实施、display:flexbox;2011 年短暂的实施以及display:flex;规范的当前和最终实施？

4

2 回答 2

3

Flexbox（标准草案）支持 + 功能查询支持：

  • Opera 在同一版本 (12.1) 中添加了对两者的支持
  • Firefox 在同一版本 (22) 中添加了对两者的支持，但直到 28 才支持 flex-wrap
  • Android 在同一版本 (4.4) 中添加了对两者的支持
  • Chrome 在 21 中增加了对 Flexbox 的支持，但直到 28 才支持功能查询

没有专门支持旧 Flexbox 草案的浏览器支持功能查询。

目前，特征查询与 Flexbox 结合的唯一实际用途是检测浏览器是否支持flex-wrap: wrap. 但是，仍然在使用支持的浏览器数量display: flex几乎flex-wrap: wrap是您可以认为它们在统计上微不足道的地步。

.foo {
    display: -ms-flexbox;
    display: -webkit-flex;
}

@supports (flex-wrap: wrap) {
    display: flex;
}

相关：灵活的盒子模型 - 显示：flex、box、flexbox？

于 2015-02-14T13:40:16.247 回答
2

实现display:box/display:flexbox的浏览器display:flex不太可能支持@supports. 此外，直到昨天，Firefox 还不支持flex-wrap. 同时，Internet Explorer 11 支持display:flex，但不支持@supports。

因此，如果您的用户可能在任何平台上使用 Firefox/Chrome 或在 Windows 8 上使用 MSIE11，您最好使用像 Modernizr 这样的 JavaScript 解决方案，或者假设浏览器支持display:flex。如果您想支持 iPhone，请记住-webkit-前缀和 flex 属性并使用display:-webkit-flex.

由于 flexbox 自动覆盖浮动并且该flex属性允许您覆盖宽度，因此您可以将非display:flex浏览器的 CSS 与那些可以混合使用。

于 2014-03-20T15:07:51.537 回答