如何让我的 flex div 溢出到下一行？

Question

在我的网站上，我有一个搜索，它以卡片格式输出结果，如下所示：

但是，当显示多个结果时，它们不会溢出到下一行，而是卡片保持在同一行并变得更瘦，卡片内的内容看起来很难看。它变得更像这样： .

div卡代码：

<div class="card">
 <a href="#">
  <div class="image">
   <div class="title">

   </div>
  </div>
 </a>
 <div class="description">
  <h5>Title</h5>
  <p>Description</p>
 </div>
</div>

以及卡片 div 的 CSS（我认为图像和描述 div css 在这里并不重要）：

.card
{
  height:18em;
  width:14em;
  margin: 10px;
  display: flex;
  flex-wrap: wrap;
  flex-direction:column;
  position:relative;
  border-radius:16px;
  overflow:hidden;
  box-shadow:  15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
}

如您所见，这些 div 是 flex 对象，我添加了 flex-wrap: wrap 属性，但它没有换行。我也尝试过其他解决方案，例如display: inline 或display: inline-block 或float: left，但都不起作用（我从网上获得了所有这些解决方案，主要是 Stack Overflow，但由于它们不起作用，我有就这个问题发表另一篇文章）。

有人可以帮我解决这个问题吗？请记住，结果是通过搜索输出的，因此无法手动修复换行，例如通过换行。

谢谢！

Answer 1

问题是您正在制作单张卡片。这不是 flex 的工作方式，所有搜索结果卡出现在其中的容器 div 都需要是 flex 的，所以如果我们有这样的 div

<div class="continer">
    <item1 class="card">
    <item2 class="card">
    <item3 class="card">
    <item4 class="card">
</div>

那么你需要这样做

.container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: <as you like it is optional>;
    .... and other properties as you like
}