Flexbox未包装12列项目后

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

使用“最大宽度”对于集装箱，现在它的工作。

.container {

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

}

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>

希望这有助于