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>

希望這有助於