Safari 中的 Flexbox 行换行问题

Question

我有一个动态填充博客文章的页面，我正在使用 Bootstrap 和 flex 将它们对齐到网格中。这在最新版本的 Chrome、Firefox 和 IE11 中工作得很好，但在 Safari 版本 8 中不起作用。在 Safari 中，第一行过早地换行一个框，但其他行很好地换行，这留下了第一行末尾的奇怪间隙。

See jsfiddle here

CSS:

.flex-row {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-direction: row;
    flex-wrap: wrap;
}
.single-post {
    padding: 50px 0 0;
    border: 1px solid #000;
    margin-bottom: 10px;
}
.posts__content-section {
    padding: 20px;
}
.button--more {
    padding: 5px;
    text-transform: uppercase;
    color: #fff;
    background: #000;
    font-size: 12px;
}

HTML（为测试添加了随机值）：

<div class="container">
    <div class="row flex-row">

        <!-- post -->
        <div class="col-lg-3 col-sm-4 col-xs-3 single-post">
            <div class="col-lg-12 posts__content-section">
                <span>september 30, 2015</span>
                 <h4>this is a really really really really long title</h4>
                 <p>this is a lot of words about stuff</p>
                 <a href="#" class="button--more">Learn More</a>
            </div>
        </div>
        <!-- /post -->
                <!-- post -->
        <div class="col-lg-3 col-sm-4 col-xs-3 single-post">
            <div class="col-lg-12 posts__content-section">
                <span>september 30, 2015</span>
                 <h4>this is a really really really really long title</h4>
                 <p>this is a lot of words about stuff</p>
                 <a href="#" class="button--more">Learn More</a>
            </div>
        </div>
        <!-- /post -->
                <!-- post -->
        <div class="col-lg-3 col-sm-4 col-xs-3 single-post">
            <div class="col-lg-12 posts__content-section">
                <span>september 30, 2015</span>
                 <h4>short title</h4>
                 <a href="#" class="button--more">Learn More</a>
            </div>
        </div>
        <!-- /post -->
                <!-- post -->
        <div class="col-lg-3 col-sm-4 col-xs-3 single-post">
            <div class="col-lg-12 posts__content-section">
                <span>september 30, 2015</span>
                 <h4>this is a really really really really long title</h4>
                 <p>this is a lot of words about stuff and things and stuff and other things and stuff</p>
                 <a href="#" class="button--more">Learn More</a>
            </div>
        </div>
        <!-- /post -->
                <!-- post -->
        <div class="col-lg-3 col-sm-4 col-xs-3 single-post">
            <div class="col-lg-12 posts__content-section">
                <span>september 30, 2015</span>
                 <h4>this is a really really really really long title</h4>
                 <p>this is a lot of words about stuff</p>
                 <a href="#" class="button--more">Learn More</a>
            </div>
        </div>
        <!-- /post -->
                <!-- post -->
        <div class="col-lg-3 col-sm-4 col-xs-3 single-post">
            <div class="col-lg-12 posts__content-section">
                <span>september 30, 2015</span>
                 <h4>sort of long title</h4>
                 <p>some words</p>
                 <a href="#" class="button--more">Learn More</a>
            </div>
        </div>
        <!-- /post -->
                <!-- post -->
        <div class="col-lg-3 col-sm-4 col-xs-3 single-post">
            <div class="col-lg-12 posts__content-section">
                <span>september 30, 2015</span>
                 <h4>this is a really really really really long title</h4>
                 <p>this is a lot of words about stuff</p>
                 <a href="#" class="button--more">Learn More</a>
            </div>
        </div>
        <!-- /post -->
                <!-- post -->
        <div class="col-lg-3 col-sm-4 col-xs-3 single-post">
            <div class="col-lg-12 posts__content-section">
                <span>september 30, 2015</span>
                 <h4>this is a shorter title</h4>
                 <p>and some more words</p>
                 <a href="#" class="button--more">Learn More</a>
            </div>
        </div>
        <!-- /post -->

    </div>
</div>

Answer 1

嗯，我觉得很傻。我只需要将 flex-row 放入一个新的 div 中，将所有 single-post 框包裹起来。 See updated jsfiddle here

Safari 中的 Flexbox 行换行问题

Flexbox row wrapping issue in Safari

html

css

safari

flexbox

twitter-bootstrap