Flex box Sample

markup.html

<div class="flex-row">
  <div class="flex-col"></div>
  <div class="flex-col"></div>
  <div class="flex-col"></div>
  <div class="flex-col"></div>
  <div class="flex-col"></div>
  <div class="flex-col"></div>
  <div class="flex-col"></div>
  <div class="flex-col"></div>
  <div class="flex-col"></div>
  <div class="flex-col"></div>
</div>

styles.scss

.flex{
  &-row{
   display: flex;
    flex-wrap: wrap;
    flex-direction: row;
   //flex-flow: row wrap;
  }
  
  &-col{
    flex: 1 0 33%;
    height: 100px;
    background-color: #FBB38B;
    border: 2px solid #fff;
    
    &:nth-child(7n){
      flex: 1 0 99%;
      background-color: #67C562;
    }
    
  }
  
}