Question

我似乎无法让Flexbox .col包裹12件物品。

这是我的flexbox scss：

.container{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 1170px;
    margin-right: auto;
    margin-left: auto;
    box-sizing: content-box;
}

.col{
    max-width: 8.333333%;
    flex-basis: 8.33333333%;
    flex: 1 auto;
    margin: 5px;
    box-sizing: border-box;
    min-height: 1px;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

这是一个有助于更好地展示样本的小提琴： https://jsfiddle.net/2Lrwcvpg/

Answer 1

使用＆＃34; max-width＆＃34;对于容器，现在它可以工作。

.container {

pkg-config --libs opencv

}

Answer 2

如果它应该包裹12件物品

进行这些更改。请查看以下代码段

.container{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 1170px;
    margin-right: auto;
    margin-left: auto;
    box-sizing: content-box;
}

.col{
    max-width: 6.2%;
    flex-basis: 8.33%;
    flex: 1 auto;
    margin: 5px;
    box-sizing: border-box;
    min-height: 1px;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

<style media="screen">
    .col, .col-2{
        background-color: orange;
    }
</style>
<div class="container">
    <div class="col">
        test
    </div>
    <div class="col">
        test
    </div>
    <div class="col">
        test
    </div>
    <div class="col">
        test
    </div><div class="col">
        test
    </div><div class="col">
        test
    </div><div class="col">
        test
    </div><div class="col">
        test
    </div><div class="col">
        test
    </div><div class="col">
        test
    </div><div class="col">
        test
    </div>
    <div class="col">
        test
    </div>


    <div class="col">
        test
    </div><div class="col">
        test
    </div>
</div>

希望这有帮助

Flexbox不会在12列项目后换行

2 个答案: