Flexbox 子项在 Safari 中呈现错误

Posted 2023-03-05

【中文标题】Flexbox 子项在 Safari 中呈现错误

【英文标题】：Flexbox children rendering wrong in Safari

【发布时间】：2015-09-12 13:05:05

【问题描述】：

我有以下 html 和 css，它们在 Firefox 和 Chrome 中运行良好，可以创建一个 3 列的框网格。但是，在 Safari 中，它会将所有盒子放入 1 行，挤压每个盒子的宽度，使其适合而不是让浮动将盒子推到新行。

我怎样才能让它在 Safari 中看起来一样，有什么想法吗？ （注意：html类'.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;
        

【参考方案1】：

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

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

see jsfiddle

澄清一下，根据caniuse.com，Safari 仍然需要-webkit 前缀

【讨论】：

抱歉这么久才标记这个答案，一定是去年忘记了！