I know this question has been asked several times here, but unfortunately, none of the solutions really works and maybe there's a better way of achieving what I need in the meanwhile.
So, given the following code, you will see that the first row fits 6 elements and the second row fits 2.
.thumbnails {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
flex-flow: row wrap;
width: 640px;
height: 400px;
justify-content: space-between;
}
.thumbnail {
width: 100px;
height: 100px;
background: #ccc;
border: 1px solid #000;
}
<ul class="thumbnails">
<li class="thumbnail"></li>
<li class="thumbnail"></li>
<li class="thumbnail"></li>
<li class="thumbnail"></li>
<li class="thumbnail"></li>
<li class="thumbnail"></li>
<li class="thumbnail"></li>
<li class="thumbnail"></li>
</ul>
See Question&Answers more detail:os