如何让我的 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: inlineordisplay: 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
}