Multiple flex items next to eachother, fill out container

Question

I have a container with 3 items in a row. The items are less wide than the container it sits in. I want the three items to fill out the container.

This is because when I downscale my browser width I'd like the items to jump to 2 or 1 whenever the container can't fit them anymore.

So in short: 3 items of 200px next to eachother in a 660px container. The middle div should mimic margin: 0 30px;. But I don't want to put a margin on every 2nd item, because when the browser width becomes smaller there will be 2 or even 1 items in a row.

Here's my fiddle to make it a little less clear

Answer 1

This seems to be what you want

.container {
  display: flex;
  flex-flow: row wrap;
  width: 660px;
  justify-content: space-between;
  border: 1px solid grey;
}
.container .item {
  width: 200px;
  background: hotpink;
}

<div class="container">
  <div class="item">Item1</div>
  <div class="item">Item2</div>
  <div class="item">Item3</div>
  <div class="item">Item4</div>
  <div class="item">Item5</div>
  <div class="item">Item6</div>
</div>