Как установить маржу только для всех, кроме первого и последнего элементов в упаковке Flexbox

Question

Скажем, у меня есть список элементов, который состоит из нескольких строк.Я хочу затем добавить пробел между всеми пунктами.Однако я не хочу иметь пробел перед первым элементом каждой строки и пробел после последнего элемента каждой строки.

Вы можете сделать это, имея явное количество элементов в строке,но я хочу, чтобы количество элементов в строке было динамическим.

Пока это выглядит так, но я не смог понять, как заставить его работать без полей по бокам.

.a {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  background: yellow;
}

.b {
  width: 50px;
  margin: 5px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: red;
}

<div class='a'>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
  <div class='b'>1</div>
</div>

Обратите внимание на пробел в начале каждой строки.Я не хочу, чтобы там было какое-то место.Хотите знать, как это сделать.

То же самое с вертикали.Я не хочу пространства сверху и снизу всего этого, просто пространство между внутренними элементами.

Answer 1

Оберните ваш список в контейнерном элементе div, задайте отрицательные поля списка, чтобы компенсировать поля элемента списка, и скройте переполнение в контейнере:

.c {
  overflow: hidden;
}

.a {
  margin: -5px;
}

/* your original CSS */

.a {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  background: yellow;
}

.b {
  width: 50px;
  margin: 5px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: red;
}

<div class='c'>
  <div class='a'>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
    <div class='b'>1</div>
  </div>
</div>