Flexbox 在 Safari 上未按预期换行。我究竟做错了什么？答案

【问题标题】：Flexbox not wrapping as expected on Safari. What am I doing wrong?Flexbox 在 Safari 上未按预期换行。我究竟做错了什么？
【发布时间】：2017-06-21 10:53:28
【问题描述】：

我有一个 flexbox 网格，它在 Safari 7（我正在测试的那个）上根本没有换行。

这是一个简化的例子：

HTML

<ul> <li><a href="#">bla bla bla</a></li> <li><a href="#">bla bla bla</a></li> <li><a href="#">bla bla bla</a></li> <li><a href="#">bla bla bla</a></li> <li><a href="#">bla bla bla</a></li> <li><a href="#">bla bla bla</a></li> <li><a href="#">bla bla bla</a></li> <li><a href="#">bla bla bla</a></li> <li><a href="#">bla bla bla</a></li> <li><a href="#">bla bla bla</a></li> <li><a href="#">bla bla bla</a></li> <li><a href="#">bla bla bla</a></li> <li><a href="#">bla bla bla</a></li> </ul>

CSS

ul {
   width: 100%;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

li {
    background:red;
    width: 25%;
    height: 150px;
    list-style-type: none;
    text-align: center;
    margin-bottom: 4.0625rem;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
}

这里有笔代码：code

这是 Safari 中的结果（使用 Browserstack 制作的屏幕截图）

我真的很纠结这个。非常感谢任何帮助。

谢谢！

【问题讨论】：

我觉得还可以i.imgur.com/g5bvdS7.png
我的客户使用的是 Safari 7，从我看到的情况来看，布局真的很乱。在这一点上，我想知道这是一个错误还是我是一个菜鸟并且没有看到任何东西
您是否尝试将display: -webkit-flex; 添加到ul？
不，自动前缀添加了display: -webkit-box;。事实上，-webkit-flex 正在做这项工作。现在我遇到了其他问题，但我想我必须手动修复它们。谢谢！您能否发表评论作为答案，以便我们将此问题设置为已解决？

标签： css safari flexbox

【解决方案1】：

Safari 7 需要 -webkit 前缀用于 flexbox 属性。 http://caniuse.com/#feat=flexbox

您的ul 上已经有display: -webkit-box;，但这是他们的Safari 版本可能想要使用的另一个display: -webkit-flex;

【讨论】：

是的，这是真的。我正在使用 autoprefixer，它负责处理前缀。但是，我刚刚更新了笔，在代码中添加了-webkit-，问题依旧
@MarianIoan 更新了我的答案以反映 display: -webkit-flex