Как сделать чтобы при space-between блоки располагались последовательно?

Question

[Cyber_bober]

Привет, если я задаю
justify-content: space-between;

и блока 2, то они размещают как выравнивание слева и выравнивание справа, а между ними дырка, пока я не добавлю третий блок и они не займут 100% пространства, что логично.


Как сделать, чтобы когда есть только 2 блока, они все равно бы выстраивались друг за другом? Ограничить ширину контейнера и увеличивать его по мере увеличения количества блоков?

Answer 1

[Сергей Горячев]

Никак не сделать, используйте другие свойства justify-content

Можете сделать так, как сказали, ограничивать что-то там, потом расширять.

Я, конечно, понимаю, что space-between очень крутое свойство, которого нам не хватало десяток лет.
Но не стоит пихать его везде и всюду, особенно, где оно не вписывается.

Comments

[Cyber_bober]

Наверное, вы правы)

Answer 2

[Ankhena]

Хак:
Добавить несколько пустых блоков с нулевой высотой и шириной.
Количество таких блоков = максимально количество блоков в строке минус 1

Answer 3

[Stanislav]

Все просто, попробуй сами:

<div class="list">
<div class="list__item">1</div>
<div class="list__item">2</div>
<div class="list__item">3</div>
</div>

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.list::after {
  content: '';
  flex: auto;
}