Чем или как заменить justify-content: space-between?

Question

Даже не заменить.. justify-content распределяет элементы неравномерно. Вот похожий вопрос - Как разместить два последних элемента слева при justify-content: space-between. Сверстал сайт, потерял scss и теперь перевести в grid будет сложно. Какие есть варианты кроме маржинов? а если и они, то margin-left: -33% использовать? А если элементов будет не 8, как в примере, а 9, js? От костылей к костылям...

Изменено: Всё нормально, scss найден:) Но всё же, как это делают другие сайты без гридов?

jsfiddle - https://jsfiddle.net/pgh9j71a/17/

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 600px;
  margin: 0 auto;
}

.item {
  background-color: green;
  width: 100px;
  height: 40px;
  margin: 5px;
  color: #fff;
  text-align: center;
  font-size: 30px;
  padding: 40px;
}

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

Answer 1

Блокам 33%, а в внутри блоков отступы.

Answer 2

.container{ 
   text-align-last: justify;

БЛОГ НА HUSL

Чем или как заменить justify-content: space-between?

Ответы (2 шт):