Safari 中的 Flexbox 行换行问题

Posted 2023-03-05

【中文标题】Safari 中的 Flexbox 行换行问题

【英文标题】：Flexbox row wrapping issue in Safari

【发布时间】：2015-12-28 14:55:25

【问题描述】：

我有一个动态填充博客文章的页面，我正在使用 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>

【参考方案1】：

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