Safari 8：Flexbox 的 "justify-content" 根本不起作用

Question

在 Macbook 上的 Safari 8.0.8 中。

我正在使用 flexbox 将元素分布在类似网格的容器中。

我的 .eventContainer 是多个 .event 框的父级，这些框应由 flexbox 分布在各行中。它在 Firefox 和 Chrome 中运行良好，但 Safari 将事件显示在各自的行中，而不是彼此相邻！

<div class="eventContainer">
    <div class="event">
        <div class="thumb">
            <img src="http://imgur.com/JDxjEknb.jpg">
        </div>
        <p class="thumbDate">Fri 18 Sept</p>
        <p class="thumbArtist">Event 1</p>
        <p class="thumbTitle">Subtitle 1</p>
        <p class="thumbLocation">Location</p>
    </div>
    <div class="event">
        <div class="thumb">
            <img src="http://imgur.com/AwA5ga7b.jpg">
        </div>
        <p class="thumbDate">Sat 19 Sept</p>
        <p class="thumbArtist">Event 2</p>
        <p class="thumbTitle">Title 2</p>
        <p class="thumbLocation">Subtitle 2</p>
    </div>
    <div class="event">
        <div class="thumb">
            <img src="http://imgur.com/9z5NkBxb.jpg">
        </div>
        <p class="thumbDate">Sat 19 Sept</p>
        <p class="thumbArtist">Event 3</p>
        <p class="thumbTitle">Title 3</p>
        <p class="thumbLocation">Subtitle 3</p>
    </div>
    <!-- Fix for FlexBox -->
    <div class="event"></div>
    <div class="event"></div>
    <div class="event"></div>
    <div class="event"></div>
    <div class="event"></div>
</div>

CSS:

.eventContainer {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.event {
    display: inline-block;
    margin-bottom: 35px;
    width: 100%;
    max-width: 200px;
    margin-right: 15px;
    cursor: pointer;
}

我错过了什么？

JSFiddle 示例：http://jsfiddle.net/foepzgf8/1/

可以在 Chrome 和 Safari 中尝试一下，看看我的意思。

Answer 1

在这种情况下实际上不是 justify-content。当您运行遇到 flexbox 问题时，返回并在 flexbox 容器的子容器上定义 flex-grow、flex-shrink 和 flex-basis 总是好的。

如果您将此添加到 .event，您的问题将得到解决：

-webkit-flex: 1 0 200px;
flex: 1 0 200px;

已更新 fiddle：http://jsfiddle.net/foepzgf8/5/

Safari 8：Flexbox 的 "justify-content" 根本不起作用

Safari 8: Flexbox's "justify-content" isn't working at all

html

css

safari

flexbox