Flexbox 子项在 Safari 中呈现错误

Question

我有以下 HTML 和 css，它们在 Firefox 中运行良好，Chrome 用于创建 3 列方框网格。但是，在 Safari 中，它将所有的盒子放在一行中，压缩每个盒子的宽度以适应而不是让浮动将盒子推到新的一行。

如何让它在 Safari 中看起来一样，有什么想法吗？（注意：html class '.box' 处于一个循环中，根据用户输入动态生成框，因此框的数量是可变的）

HTML:

<div id="home-grid">
<div class="box">
Contents of box
</div>
</div>

CSS:

#home-grid {
    margin-top: 20px;
    float: left;
    display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
    display: -moz-box;      /* OLD: Firefox (buggy) */
    display: -ms-flexbox;   /* MID: IE 10 */
    display: -webkit-flex;  /* NEW, Chrome 21–28, Safari 6.1+ */
    display: flex;          /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */
    flex-flow: row wrap;
    justify-content: space-between;
width: 100%
    }
#home-grid .box {
        position: relative;
        float: left;
        width: 192px!important;
        height: 180px;
        border: 1px solid #F73987;
        margin-bottom: 20px;
        overflow: hidden;
        }

Answer 1

通过添加以下两行，我能够让它在最新版本的 Safari 中工作：

-webkit-flex-flow: row wrap;
-webkit-justify-content: space-between;

see jsfiddle

澄清一下，根据 caniuse.com

，Safari 仍然需要 -webkit 前缀

Flexbox 子项在 Safari 中呈现错误

Flexbox children rendering wrong in Safari

html

css

safari

flexbox