0

Даже не заменить.. 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>

3
  • Если я правильно понял вопрос. То можно сделать невидимый элемент jsfiddle.net/01b892qe/7
    – Max Watson
    28 мая 2021 в 9:08
  • чёртов гений! Правда без js не обойтись. Спасибо!
    – Arrov192
    28 мая 2021 в 9:11
  • Кажется, делать такое гридами — единственный разумный вариант, а остальное даже если и работает, то костыли
    – andreymal
    28 мая 2021 в 11:25

2 ответа 2

0

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

0
0
.container{ 
   text-align-last: justify; 
1
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 8 ноя 2021 в 13:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.