Question

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

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

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

我制作了一支笔，可以在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，命令行等。

Safari中的Flexbox问题

1 个答案: