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/

Safari 8：Flexbox＆＃34;证明内容＆＃34;根本不工作

1 个答案: