If this is our code, it creates 4 boxes in each row, with an equal vertical space between them , but there are two problems that I don't know how to fix:
Boxes in the last row should be adjusted to the left.
There should be 20px vertical space between boxes.
How can I do that with flexbox?
.wrapper { max-width: 80%; margin: 20px auto 0; display: flex; flex-flow: wrap; justify-content: space-between; /* justify-content: flex-start; */}.box { flex-basis: 23%; height: 100px; outline: 1px solid black; background-color: #ccc; margin-bottom: 20px;}<div class="wrapper"><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>