Интервал предметов в коробке

Question

У меня проблема с расстоянием между объектами в коробке.

У меня есть контейнер с предметами:

.container {
  display: flex;
  justify-content: space-between;
}

<div class="container">
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
</div>

Но когда я добавляю больше объектов или изменяю размер окна, это разрушает отзывчивость.Я хочу получить 3 или более подряд.Контейнер будет иметь flex-wrap.И в каждом первом и последнем ящике подряд не было пробелов / полей в точке контакта с ящиком, как на рисунке ниже.

Я пытался justify-content: space-between, отключить поля и другие.

Есть ли способ легко сделать его отзывчивым?

Answer 1

Поместите CSS как показано ниже. Надеюсь, он будет работать нормально.

*{
  box-sizing:border-box;
}
body,html{
  width:100%;

}
.container {
  width:90%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border: 1px solid blue;
  flex-wrap:wrap;
  margin:0 auto;
  padding:0;
}

.box {
  flex: 1 0 calc(33.3333% - 2rem - 2px);
  border: 1px solid red;
  padding: 10px;
  margin:15px 0;
  height:150px;
  min-width:150px;
  display:inline-flex;
  align-items:center;
  justify-content:center
}

@media only screen and (min-width:576px){
  .container{
    flex-wrap:wrap;
    display:
  }
  .box:nth-child(3n-1){
  margin-left:2%;
  margin-right:2%;
}
} 

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
</div>

Answer 2

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 1px solid blue;
}

.box {
  flex: 1 1 25%;
  border: 1px solid red;
  padding: 20px;
  margin: 10px;
}

<div class="container">
  <div class='box'>1</div>
  <div class='box'>2</div>
  <div class='box'>3</div>
  <div class='box'>4</div>
  <div class='box'>5</div>
  <div class='box'>6</div>
  <div class='box'>7</div>
  <div class='box'>8</div>
  <div class='box'>9</div>
</div>

Надеюсь, я правильно понял ваш вопрос, и вы хотели иметь поля :) Если вы откроете фрагмент на полной странице, вы сможете поиграть с размером экрана ипосмотрите, как будут работать div.