Tengo un diseño con un número indefinido de tarjetas con flex, pero cuando la línea se rompe para alcanzar el tamaño horizontal final, hay un espacio muy grande entre los elementos de la línea inferior. ¿Cómo puedo dejar el espaciado normal?

Ejemplo

 .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>