Question

我有一个网页，其中的代码在呈现时大致类似于此。

#flex-box-holder {
  display: flex;
  width: 100%;
  height: auto;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
}

.component-holder {
  width: 45%;
  border: 4px solid black;
  margin-bottom: 30px;
}

<div id="flex-box-holder">
     <div class="component-holder">
          <p>Random text here</p>
     </div>
     <div class="component-holder">
          <p>Random text here</p>
     </div>
     <div class="component-holder">
          <p>Random text here</p>
     </div>
     <div class="component-holder">
          <p>Random text here</p>
     </div>
     <div class="component-holder">
          <p>Random text here</p>
     </div>
</div>

工作正常，除了一件事。如果有2个组件在同一行上，而一个组件确实比另一组件长，则存在大量空白。如果我想让它们错开怎么办？

发生的事情的图像：https://imgur.com/jHHFdXf

我想发生的事情的图像（在Pinta中编辑）：https://imgur.com/xD0Ah8T

这有意义吗？如果是，我该如何使用flexbox进行编码？

删除多余的空格（Flexbox）

0 个答案: