набивка с дисплеем: flex

Question

Я пытаюсь сделать интервал между блоками, но это не работает, я попытался использовать бит отступа для заполнения, это не работает.

Мой код:

html {
  background-color: #2d303a;
  background: #2d303a;
}

.container {
  display: flex;
  align-items: center;
  padding: 1rem;
  background-color: #319635;
  text-align: center;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
}

.item-1 {
  color: white;
  font: bold 16px/30px "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0 20px;
}

.bacground_color {
  background: #2d303a;
}

<div class="container">
  <div class="item-1">1
    <div class="item-2">Dossier(s) non affecté(s) </div>
  </div>
  <div class="item-1">2
    <div class="item-2">Dossier(s) ouvert(s) sans action</div>
  </div>
  <div class="item-1">3
    <div class="item-2">Dossiers non modifiés depuis 5 jours</div>
  </div>
  <div class="item-1">4
    <div class="item-2">Dossiers hors gel</div>
  </div>
  <div class="item-1">5
    <div class="item-2">Dossier(s) en cours</div>
  </div>
</div>

Я использую дисплей: flex Я не уверен, что это хорошая проблема.Спасибо за прочтение !

Answer 1

Ваш код работает нормально, и между элементами есть пробелы из-за поля

, если вы хотите узнать об этом попробуйте удалить фон из контейнера и поместите его в класс .item-1 Я также добавил отступы: 0 10px к каждому элементу

Проверьте это

html {
  background-color: #2d303a;
  background: #2d303a;
}

.container {
  display: flex;
  align-items: center;
  padding: 1rem;
  text-align: center;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
}

.item-1 {
  color: white;
  font: bold 16px/30px "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0 20px;
  padding: 0 10px;
  background-color: #319635;
}

.bacground_color {
  background: #2d303a;
}

<div class="container">
  <div class="item-1">1
    <div class="item-2">Dossier(s) non affecté(s) </div>
  </div>
  <div class="item-1">2
    <div class="item-2">Dossier(s) ouvert(s) sans action</div>
  </div>
  <div class="item-1">3
    <div class="item-2">Dossiers non modifiés depuis 5 jours</div>
  </div>
  <div class="item-1">4
    <div class="item-2">Dossiers hors gel</div>
  </div>
  <div class="item-1">5
    <div class="item-2">Dossier(s) en cours</div>
  </div>
</div>