如何使弹性项目适合两行的高度？

Question

我正在尝试使一排特殊的 flexboxes 拉伸为两行的高度。这是我想要实现的目标： 我想要的。但这是我目前的结果：Result。

我想我必须使用flex-wrap: wrap;，但我不确定。我不想这样做flex-direction: column;，因为那样我就无法像在一行中对齐那样拉伸顶部的 div。我希望所有子 div 成为同一个 flex 容器的一部分。有没有人有任何想法？

注意：我找到了这个，我可以在那里创建它。如果我能以某种方式将三个向上移动到两个旁边，我也许能够实现我想要的。不知道如何做到这一点。

这是我正在使用的代码：

.flex-row {
  display: flex;
  flex: 1;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex-col {
  margin: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
}

<div class="flex-row">
  <div class="flex-col">
    <p>This box has little text.</p>
  </div>
  <div class="flex-col">
    <p>This box is diffrent than small. It has a middleish amout of text.</p>
  </div>
  <div class="flex-col">
    <p>This box is diffrent than small and middleish. It has a lot of text. Thus, I want it to continue onto the next row of flexboxes.</p>
  </div>
  <div class="flex-col">
    <p>This box has little text.</p>
  </div>
  <div class="flex-col">
    <p>This box is diffrent than small. It has a middleish amout of text.</p>
  </div>
</div>

谢谢你。

Answer 1

你可以像这样做grid。

body {
  background-color: black;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 15px;
}

.tall {
  grid-row: 1 / 3;
  grid-column: 3;
}

.grid-box {
  background-color: #9e9e9e;
}

<div class="grid">
  <div class="grid-box">
    <p>This box has little text.</p>
  </div>
  <div class="grid-box">
    <p>This box is diffrent than small. It has a middleish amout of text.</p>
  </div>
  <div class="grid-box tall">
    <p>This box is diffrent than small and middleish. It has a lot of text. Thus, I want it to continue onto the next row of flexboxes.</p>
  </div>
  <div class="grid-box">
    <p>This box has little text.</p>
  </div>
  <div class="grid-box">
    <p>This box is diffrent than small. It has a middleish amout of text.</p>
  </div>
</div>