彼此相邻的多个弹性项目，填写容器

Question

我有一个连续3件物品的容器。这些物品的宽度不如它所在的容器。我希望这三个物品能够填满容器。

这是因为当我缩小浏览器宽度时，只要容器不再适合它们，我就会跳转到2或1的项目。

简而言之： 在660px容器中彼此相邻的3个200px项目。中间div应该模仿margin: 0 30px;。但是我不想在每个第二项上留一个余量，因为当浏览器宽度变小时，连续会有2个甚至1个项目。

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

Answer 1

这似乎是你想要的

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;