<div class="wrapper">
<div class="flex-container-column">
<div class="item">flex item 1</div>
<div class="item">flex item 2</div>
<div class="item">flex item 3</div>
<div class="item">flex item 4</div>
<div class="item">flex item 5</div>
<div class="item">flex item 6</div>
<div class="item">flex item 7</div>
<div class="item">flex item 8</div>
<div class="item">flex item 9</div>
<div class="item">flex item 10</div>
</div>

<!-- row -->
<div class="flex-container-row">
<div class="item2">flex item1</div>
<div class="item2">flex item 2</div>
<div class="item2">flex item 3</div>
<div class="item2">flex item 4</div>
<div class="item2">flex item 5</div>
<div class="item2">flex item 6</div>
<div class="item2">flex item 7</div>
<div class="item2">flex item 8</div>
<div class="item2">flex item 9</div>
<div class="item2">flex item 10</div>
<div class="item2">flex item 10</div>
<div class="item2">flex item 10</div>
</div>
 
</div>

*{ box-sizing:border-box; }

.wrapper {
  display: flex;
  justify-content: space-evenly;
  width: 800px;
  margin: 0 auto;
}

.flex-container-column {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: solid 4px #B5EECB;
}

.item {
  padding: 8px;
  margin: 5px;
  border: 1px solid #CBC7FC;
}

/* apply the style to items position with even number */
.item:nth-child(odd) {
  background-color: #FEC8A7;
}

/* apply the style to items position with odd number */
.item:nth-child(even) {
  background-color: #FCECA5;
}


.flex-container-row {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  width: 80%;
  height: 100px;
  border: solid 4px #3B0918;
}

.item2 {
  flex-grow: 1;
  padding: 8px;
  margin: 5px;
  border: 1px solid #B8390E;
}

/* targets the first flex item */
.item2:first-child {
 background-color: #A16AE8; 
}

/* targets the last flex item */
.item2:last-child {
  background-color: #4120A9;
}