I have a layout with an indefinite number of cards with flex, but when the line breaks to reach the final horizontal size, there is a very large spacing between the items on the bottom line. How can I leave normal spacing?

Example

.album {
    margin-top: 80px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
}

<div class="container">
<div class="albums">
{% for album in albums %}
  <div class="{% if album.ping == ''%}card-without-pin{% else %}card{% endif %}" style="width: 18rem;" data-id="{{album.id}}">
    <div class="card-header"><i class='bx bxs-photo-album bx-lg'></i></div>
    <div class="card-body">
      <h4>{{album.name}}</h5>
      <p class="card-body-text">{{len(album.imgs)}} photos</p>
    </div>
  </div>
  <hr>
{% endfor %} 
</div>
</div>