How can I adjust the space-between not splitting its last two items in a 3-col situation?

Question

The last row, there are only two blocks and they got split on the left and right.

Is it possible to let they just aligned normally?

#wrap {
  width: 500px;
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  background: red;
  width: 32%;
  height: 20px;
  margin-top:9px;
}

<div id="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 1

Dont use justify-content: space-between; but add the margin yourself:

#wrap {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
}

.item {
  background: red;
  width: 32%;
  height: 20px;
  margin-top: 9px;
}

.item+.item {
  margin-left: 2%;
}

.item:nth-child(3n+1) {
  margin-left: 0;
}

<div id="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>