【问题标题】:How could I use "display : flex " css property, on older versions of firefox and chrome?如何在旧版本的 firefox 和 chrome 上使用“display : flex”css 属性?
【发布时间】:2015-04-07 13:11:00
【问题描述】:

我一直在尝试使用“display: flex”,它适用于较新版本的浏览器,但无法使其适用于旧版本。我尝试使用“显示:框”属性作为后备,但即使它似乎也不起作用。

    #flexSampleDiv{
        display: flex;
        display: -webkit-flex;
        flex-flow: row wrap;
        -webkit-flex-flow: row wrap;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: stretch;
     }

是的,我说的是多行 flex,即应该能够使用上面代码块中位于“flex-flow:row wrap”的“flex-wrap:wrap”属性。

【问题讨论】:

  • 你能粘贴一些你的html或css吗?
  • 您在什么浏览器中尝试过,版本是什么? CSS flexbox 仅在 IE >=10、FF >=31 和 Chrome >=31 版本中受支持。你可以在这里查看完整的支持版本集caniuse.com/#search=flexbox
  • 是的,它确实可以在 firefox 27 和 chrome 31 以上运行,但我想知道它是否可以在旧版浏览器上运行,至少在 firefox 18 或更高版本上运行。
  • 我发现 "display : flex " 可以在 FF18 等旧版浏览器中使用,但它无法呈现 "flex-wrap:wrap" 属性。现在我正在寻找可以在那些浏览器中模拟“flex-wrap:wrap”的后备。希望有解决办法。
  • 我认为 28 以下的 Firefox 版本中没有类似“flex-wrap:wrap”的东西。(这是在 bugzilla.mozilla.org/show_bug.cgi?id=939901 中添加的)如果你想模拟它,你可能会有使用基于浮动的布局而不是 flexbox。但我不建议对那么旧的 Firefox 版本做任何事情,因为(与任何旧的浏览器版本一样)它们具有众所周知的安全漏洞(已在较新版本中修复)。

标签: html css flexbox fallback


【解决方案1】:

仅了解如何使用当前/新的标准 flexbox 属性并让工具为您完成这项工作。我使用AutoPrefixer 工具。

【讨论】:

    猜你喜欢
    • 2020-12-24
    • 2016-05-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-01-11
    相关资源
    最近更新 更多