如何使弹性项目适合两行的高度？ [复制]答案

【问题标题】：How do I make flex items fit the height of two rows? [duplicate]如何使弹性项目适合两行的高度？ [复制]
【发布时间】：2019-04-21 06:28:36
【问题描述】：

我正在尝试将一排弹性盒中的特殊元素拉伸到两行的高度。这是我想要实现的目标： 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>

谢谢。

【问题讨论】：

所有.flex-col 都必须是.flex-row 的直接子代吗？
是的，我希望所有的.flex-col 都在同一个弹性容器中。
那么最好的办法是使用 CSS Grid，因为 flex 一次可以朝一个方向前进。
这是一个 example 的 css 网格，可以轻松实现您想要的。

标签： html css flexbox

【解决方案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>

【讨论】：

你能给我解释一下这个grid-column: 3;不是从头开始的第三列吗？，以及为什么当你删除它时它会转到第 1 列？
@ZohirSalak 这里有一个很好的答案：stackoverflow.com/a/43790678/5385381
还有grid-row: 1 / 3;和grid-row: span 2;的区别？因为如果您使用后者，则不必指定列。

【解决方案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>

【讨论】：

是否有可能使排列成一行的那些成为.flex-col double中的一个项目的高度？
我修正了我的答案，请再次检查

【解决方案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>

【讨论】：