Использование flask / jinja для размещения динамического контента без HTML-таблицы

Question

Я не веб-разработчик, поэтому, пожалуйста, прости меня, если этот вопрос не является базовым.

Я пытаюсь создать часть своего приложения для фляжки, которая подойдет для стиля альбома / карточкистраница как это .

Итак, в идеале я хотел бы иметь возможность отображать любое количество карточек на странице, оборачивая содержимое таким образом, чтобы в строке отображалось не более 3 или 4 карточек.

Я подумал, используяflex-box может помочь в этой ситуации, и вот что я пробовал до сих пор:

<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 %}

Но, к сожалению, это просто отображает их горизонтально в бесконечность полей.

Я использовал Flask для отображения динамического контента в таблицах HTML и раньше, но возможно ли сделать что-то подобное?

Спасибо за помощь!

Answer 1

вы можете использовать flex-flow: row wrap, а для центрирования элементов используйте justify-content: center Я добавил margin:10px вокруг, но вы можете изменить это и сделать justify-content: space-around или justify-content: space-between.Другой способ сделать это - использовать display: grid, подробнее об этом можно прочитать здесь:

Полное руководство по сетке

или

Полное руководство по Flexbox

Проверьте этот код:

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>