У меня есть неизвестное количество элементов в контейнере, которые нужно обернуть без полей на внешней стороне, но минимальные поля между ними.
Мне также нужно, чтобы они были оправданы с помощью 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>