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

Posted 2023-03-05

【中文标题】Safari 8：Flexbox 的“justify-content”根本不起作用

【英文标题】：Safari 8: Flexbox's "justify-content" isn't working at all

【发布时间】：2015-12-13 22:17:18

【问题描述】：

在 Macbook 上的 Safari 8.0.8 中。

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

我的.eventContainer 是多个.event 框的父级，这些框应按弹性框分布在各行中。它在 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 中尝试一下，看看我的意思。

【参考方案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/