Flexbox 在 12 列项目后不换行答案

【问题标题】：Flexbox not wrapping after 12 column itemsFlexbox 在 12 列项目后不换行
【发布时间】：2017-03-12 00:01:25
【问题描述】：

我似乎无法让 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/

【问题讨论】：

将 max-width 更改为 width ...它应该可以工作

标签： html sass flexbox

【解决方案1】：

如果它应该在 12 个项目之后换行

进行这些更改。检查以下sn-p

.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>

希望对你有帮助

【讨论】：

【解决方案2】：

对容器使用“max-width”，现在它可以工作了。

.container{

display: flex;    
flex-wrap: wrap;     
max-width: 1170px;   
margin-right: auto;   
margin-left: auto;   
box-sizing: content-box;

}

【讨论】：