长包装的弹性项目将其他人推倒

Question

我在一个弹性框中有 3 个不同长度的div。每个div 的宽度为 47%。我正在使用弹性包装来包装它们。最长的div 在顺序中排在第二位，并将第三个div 一直推到它结束的地方。无论如何，有没有让第三个div出现在第一个div下面。

代码笔

.HTML

<div class="flex-box">
  <div class="flex-item">
    <ul>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div class="flex-item">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div class="flex-item">
    <ul>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

.CSS

.flex-box{
  display: flex;
  background: black;
  flex-wrap: wrap;
  width: 500px;
  justify-content: space-between;
  align-items: flex-start;
}
.flex-item{
  width: 47%;
  background: red;
  border: 1px solid white;
  margin-bottom: 10px;
}

Answer 1

要使用单个容器垂直和水平排列项目，请使用grid而不是flex - 这就是它的用途！

以下是grid解决方案的 CSS，HTML 保持不变：

.flex-box{
  display: grid;
  grid-template-columns: 47% 47%;
  grid-template-rows: 78px auto;
  background: black;
  width: 500px;
  justify-content: space-between;
  align-items: start;
}
.flex-item{
  width: 100%;
  background: red;
  border: 1px solid white;
  margin-bottom: 10px;
}
.flex-item:nth-of-type(2) {
  grid-row-start: span 2;
}

您可能希望在 HTML 中更改/添加类以避免摆弄nth-of-type。

Answer 2

按

以下方式重新排列class="flex-item"。

<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div> //Longest div container

然后把flex-direction:column给容器。并且不要忘记为您的容器提供max-height:(Anything less than your container height)。

---

.flex-box {
  display: flex;
  flex-direction: column;
  background: black;
  flex-wrap: wrap;
  width: 500px;
  max-height: 520px;
  justify-content: space-between;
}
.flex-item {
  width: 47%;
  background: red;
  border: 1px solid white;
  margin-bottom: 10px;
}

<div class="flex-box">
  <div class="flex-item">
    <ul>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div class="flex-item">
    <ul>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div class="flex-item">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>