css - 跨浏览器支持 CSS Flexbox

Question

我一直在使用下面提到的代码，它适用于我的 Chrome，但不适用于我的 IE9 和 Safari。

我在谷歌上搜索了解决方案，尽管我得到了各种供应商前缀，但这些结果让我感到困惑。

<div style="display: flex; flex-direction: row;">
    <div></div>
    <div></div>
</div>

Answer 1

要涵盖所有 Flexbox 实现，您的 CSS 应如下所示:

.foo {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

但是请注意，除非您要覆盖先前的 flex-direction 声明，否则不必指定 flex-direction: row:row 是默认方向。另请注意，IE10 是第一个支持 Flexbox 的 IE 版本。