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

Question

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

但是，当显示多个结果时，它们并没有溢出到下一行，而是卡在同一行并且变得更细，并且卡中的内容看起来很难看。它变得更像这样： .

div-card代码：

<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 objects，我添加了 flex-wrap: wrap 属性，但它没有不要包裹。我还尝试了其他解决方案，例如 display: inline 或 display: inline-block 或 float: left，none 其中有效（我从网上获得了所有这些解决方案，主要是 Stack Overflow ，但由于它们不起作用，我不得不就此问题再做一个 post）。

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

谢谢！

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
}

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

How can I make my flex divs overflow to the next line?

css

flexbox

display