Using flask/jinja to accomodate dynamic content without HTML table - html

Question

I'm not a web developer, so please forgive me if this question is off-base.
I'm trying to build out a part of my flask app that serves up an album/card style page like this.
So, ideally I would like be able to display any number of cards on the page, wrapping the content so that no more than 3 or 4 cards are displayed per row.
I thought using flex-box might help in this situation, and this is what I have tried so far:
<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 %}
But unfortunately, this just displays them horizontally into the infinity of the margins.
I've used Flask to display dynamic content with HTML tables before, but is it possible to do something like this?
Thanks for your help!

Answer 1

you can use flex-flow: row wrap and to center the elements use justify-content: center I added margin:10px around but you can choose to change that and make the justify-content: space-around or justify-content: space-between. another way to do this layout is to use display: grid you can read more about it here:
A Complete Guide to Grid
or
A Complete Guide to Flexbox
Check this code:
section {
max-width: 160px;
height: auto;
border: 1px solid #a2a2a2;
text-align: center;
margin: 10px;
}
img {
width: 100%;
}
.parent--products {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
<div class="parent--products">
<section class="products">
<div class="product-card">
<div class="product-image">
<img src="https://picsum.photos/5416/3611?image=1082">
</div>
<div class="product-info">
<h5>Winter Jacket</h5>
<h6>$99.99</h6>
</div>
</div>
</section>
<section class="products">
<div class="product-card">
<div class="product-image">
<img src="https://picsum.photos/5416/3611?image=1082">
</div>
<div class="product-info">
<h5>Winter Jacket</h5>
<h6>$99.99</h6>
</div>
</div>
</section>
<section class="products">
<div class="product-card">
<div class="product-image">
<img src="https://picsum.photos/5416/3611?image=1082">
</div>
<div class="product-info">
<h5>Winter Jacket</h5>
<h6>$99.99</h6>
</div>
</div>
</section>
<section class="products">
<div class="product-card">
<div class="product-image">
<img src="https://picsum.photos/5416/3611?image=1082">
</div>
<div class="product-info">
<h5>Winter Jacket</h5>
<h6>$99.99</h6>
</div>
</div>
</section>
<section class="products">
<div class="product-card">
<div class="product-image">
<img src="https://picsum.photos/5416/3611?image=1082">
</div>
<div class="product-info">
<h5>Winter Jacket</h5>
<h6>$99.99</h6>
</div>
</div>
</section>
<section class="products">
<div class="product-card">
<div class="product-image">
<img src="https://picsum.photos/5416/3611?image=1082">
</div>
<div class="product-info">
<h5>Winter Jacket</h5>
<h6>$99.99</h6>
</div>
</div>
</section>
</div>