Safari 8：Flexbox的「證明內容」根本不起作用

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; 

更新小提琴：http://jsfiddle.net/foepzgf8/5/