一个Flexbox网格，其中两个Flex项目相邻 [英] A flexbox grid of two flex items next to one

问题描述

我正在尝试在左侧设置一个div，在右侧设置两个。 右始终应低于 topRight div。 topRight 是唯一具有可变高度的div。

I am trying to have one div on the left and two on the right. The bottomright should always be below the topRight div. The topRight is the only div with a variable height.

我目前正在尝试使用 flexbox 友人实现，您可以在下面的代码中看到。

I am currently trying to achieve this using flexbox als you can see in my code below.

我想要一些指示。

.wrapper {
  display: flex;
  height: 100px;
}

.left {
  background-color: green
}

.topRight {
  background-color: yellow
}

.bottomright {
  background-color: red
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="topRight">TopRight</div>
  <div class="bottomright">Bottom</div>
  </div

推荐答案

在容器上的高度固定不变的情况下，就像在代码中一样，您可以使用 flex-direction：column 和 flex-wrap：wrap 。固定高度用作断点，告诉伸缩物品在哪里包装。

With a fixed height on the container, as you have in your code, you can use flex-direction: column and flex-wrap: wrap. The fixed height serves as a break point, telling flex items where to wrap.

.wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100px;
}

.left {
  flex: 0 0 100%; /* consumes full height of first column; forces siblings to wrap */
  background-color: lightgreen
}

/* variable height div */   
.topRight {
  background-color: yellow
}

.bottomright {
  flex: 1; /* consumes remaining space in column */
  background-color: red
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="topRight">TopRight<br>variable height</div>
  <div class="bottomright">Bottom</div>
  </div>

这篇关于一个Flexbox网格，其中两个Flex项目相邻的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！