Flexbox对齐内容：使用少量元素处理空间

Question

是否有可能或解决方法，当我使用flexbox和justify-content：space-between之类的网格时，元素会浮动？

这是我的代码/演示，我的意思是：

＆＃13;

＆＃13;

#wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#wrapper div {
  width: 19%;
  background: #ccc;
  height: 50px;
  margin-bottom: 20px;
}

＆＃13;

<div id="wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

＆＃13;

＆＃13;

＆＃13;

前10个方框都没关系，我希望有类似这个网格的东西，但是最后一个应该是彼此相邻的，而不是在它们之间有这么大的空间。

Answer 1

尝试这样的事情：

#wrapper {
  display: flex;
  flex-wrap: wrap;
 
}

#wrapper div {
  width: 19%;
  background: #ccc;
  height: 50px;
  margin-bottom: 20px;
  margin-left:5px;
}

<div id="wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>