如何使flex项目适应两行的高度？

Question

如何使flex项目适应两行的高度？

htmlcssflexbox

5

我试图让 flexbox 中的一个特殊 `

` 元素高度扩展到两行的高度。这是我的目标：期望效果。但这是我当前的结果：实际效果。

我认为我必须使用 flex-wrap: wrap;，但我不确定。我不想使用 flex-direction: column;，因为那样我不能像在一行中对齐一样拉伸顶部的 `

` 元素。我希望所有的子 `

` 元素都属于同一个 flex 容器。有没有人有什么想法？

注意：我发现了这个，我能够创建出这个。如果我能把 "Three" 移动到 "Two" 旁边，我可能就能达到我想要的效果。但我不知道怎么做。

这是我正在使用的代码：

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

谢谢。

- BGM52

所有的 .flex-col 都必须是 .flex-row 的直接子元素吗？ - Rainbow

是的，我希望所有的.flex-col都在同一个flex容器中。 - BGM52

4

如果您希望同时实现多个方向上的布局，最好使用CSS网格布局（CSS Grid），因为弹性盒子布局（flex）只能单向排列。 - Rainbow

3

这里有一个示例，展示了如何使用CSS Grid轻松实现您想要的效果。点击链接查看。 - Rainbow

3个回答

2

在一个包装器div中包含两个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>

- Itay Gal

有没有可能将一排中对齐的项目的高度设置为 .flex-col double 中任意一个项目的高度？ - BGM52

我修正了我的回答，请再次检查。 - Itay Gal

0

只是为了好玩，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>

- Kosh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ksav · Accepted Answer

你可以用 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>