Safari 中的 Flexbox 问题

Question

我正在用 flexbox 测试一些东西，但是我遇到了一些问题。 我已经搜索了论坛，但没有找到我想要的答案，所以我在这里注册以希望找到答案。

现在我知道我应该提供一些回退，并且我将来会提供，但目前我无法让 flexbox 在 Safari（桌面和移动设备）中工作。我尝试了 http://caniuse.com/#feat=flexbox 建议的 -webkit-prefix，但它不起作用。

我可能只是遗漏了一些东西，但我似乎无法解决。

我做了一支笔，可以在 Chrome 中使用，但在 Safari 中无法使用...

HTML

<div class="aligner">
  <h1>Flexbox Testing</h1>
</div>

CSS

body, html {
    height: 100%;
    width: 100%;
}

.aligner {
    height: 100%;
    width: 100%;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

这是 Codepen http://codepen.io/linkerd/pen/vHibq的链接

非常感谢您的帮助！

提前致谢。

史蒂夫

Answer 1

Safari 仍然需要 flexbox 的供应商前缀。

添加：

.aligner {

  -webkit-align-items: center;
  -webkit-justify-content: center;
}

笔：

http://codepen.io/anon/pen/xbamKx

autoprefixer 是避免这种头痛的真正有用工具。它适用于 grunt、gulp、命令行等。