Выровняйте по левому краю последний ряд flexbox, используя пробел и поля [дубликаты]
На этот вопрос уже есть ответ здесь:
Таргетирование флекс-элементов в последнем ряду 3 ответаУ меня есть неизвестное количество элементов в контейнере, которые нужно оборачивать без полей снаружи, но с минимальными полями между ними.
Мне также нужно, чтобы они были оправданыspace-between
и последний ряд выровнен по левому краю.
Я пытаюсь сделать это с flexbox, например, так:
.outside {
border: 1px solid black;
}
.container {
margin: -5px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.container:after {
content: '';
flex: auto;
}
.box {
background: red;
width: 50px;
height: 50px;
margin: 5px;
}
<div class="outside">
<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 class="box"></div>
<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 class="box"></div>
<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 class="box"></div>
</div>
</div>
Это работает правильно, за исключением того, что интервал в последнем ряду отключен, как вы можете видеть на скриншоте:
Есть ли способ заставить это работать, если мы не знаем, сколько будет столбцов (используя flexbox или что-то еще, кроме javascript)?