Flexbox justify-content: обработка пространства между несколькими элементами

Question

Есть ли возможность или обходной путь, что элементы плавают влево, когда у меня есть что-то вроде сетки, созданной с помощью flexbox и justify-content: space -ween?

Вот мой код / ​​демо, что я имею в виду:

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

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

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

Эти первые 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>