Although I'm not well-versed in web development, I hope this question is on the right track.
In my flask app, I'm trying to create a section that showcases albums/cards in a similar style as seen on this example.
My goal is to display multiple cards on the page, with a maximum of 3 or 4 cards per row, wrapping the content accordingly.
I've attempted to use flex-box to achieve this, with the following code snippet:
<div class="box" style="display:flex; max-width: 500px;">
{% for row in x %}
<div class="card mb-4 box-shadow" style="padding:5px; min-width: 200px; margin: 10px;">
<div class="card-body">
<h5>{{row.title}}</h5>
<p class="card-text" style="font-size: 15px;">{{row.text}}</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<form action="filtersearch" name="filtersearch" method="POST" style="width: 80%;">
<input id="namesearch" name="nameval" style="width: 80%;" placeholder={ {current_name}}>
</form>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
{% endfor %}
However, the cards end up extending infinitely in a horizontal manner beyond the margins.
I've utilized Flask for dynamic content display using HTML tables in the past, but I'm unsure if a layout like this is achievable. Can you offer any guidance?
Thank you for your assistance!