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

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 的问题时，最好返回并定义 flex-grow、flex-shrink 和 flex-basis flexbox 容器的 child 。

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

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

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