Question

我正在尝试使一排flexbox中的特殊内容拉伸为两行的高度。这是我要实现的目标： What I want。但是，这是我当前的结果：Result。

我认为我必须使用flex-wrap: wrap;，但不确定。我不想做flex-direction: column;，因为那样我就无法像在一行中对齐那样拉伸div的顶部。我希望所有子div都属于同一个flex容器。有人有什么想法吗？

注意：我找到了this，在那里我可以创建this。如果我能以某种方式将三个向上移动到第二个旁边，我可能能够实现我想要的。不确定如何执行此操作。

这是我正在使用的代码：

.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>

Answer 2

用包装器div包装2个div。那应该可以解决问题。

.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;
}

.double {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0px;
}

<div class="flex-row">
  <div class="double">
    <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>

  <div class="double">
    <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>
  <div class="flex-col">
    <p>This box is diffrent than small. It has a middleish amout of text.</p>
  </div>
</div>

Answer 3

table解决方案很有趣：

table {border-spacing: 10px}

td {
  width: 33%;
  padding: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-sizing: border-box;
}

<table>
  <tr>
    <td>This box has little text.</td>
    <td>This box is diffrent than small. It has a middleish amout of text.</td>
    <td rowspan="2">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.</td>
  </tr>
  <tr>
    <td>This box has little text.</td>
    <td>This box is diffrent than small. It has a middleish amout of text.</td>
  </tr> 
</table>

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

3 个答案: