一个紧挨着一个的两个弹性项目的弹性盒子网格[重复]答案

【问题标题】：A flexbox grid of two flex items next to one [duplicate]一个紧挨着一个的两个弹性项目的弹性盒子网格[重复]
【发布时间】：2017-08-24 23:42:06
【问题描述】：

我想在左边有一个 div，在右边有两个。 bottomright 应始终低于 topRight div。 topRight 是唯一一个高度可变的 div。

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

我想知道一些方向。

.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

【问题讨论】：

如果你包装 right div，这很容易解决为动态（没有固定高度）。这会是一个选择吗？

标签： html css flexbox

【解决方案1】：

容器具有固定高度，正如您在代码中所做的那样，您可以使用flex-direction: column 和flex-wrap: 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>

【讨论】：

【解决方案2】：

在 html 上放置一个带有一个名为 right 的类的 div 包装 topRight 和 bottomRight 并在 css 上使用这个 css：

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

.right {
 display: flex-flow;
 }

.left {
     background-color: green
}

.topRight {
 background-color: yellow;
 height: 50px;
}

.bottomright {
  background-color: red;
  height: 50px;
}

希望对你有帮助:)

【讨论】：

你需要阅读 flexbox 属性...现在，这根本行不通

【解决方案3】：

了解详情

教程等：https://css-tricks.com/snippets/css/complete-guide-grid/

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* any height s */
  background-color: green;
}

.leftspan {
  grid-row: span 2;/* if 2 rows avalaible */
}

.topRight {
  background-color: yellow;
  grid-column: 2 /-1
}

.bottomright {
  background-color: red;
  grid-column: 2 /-1
}

.bottomfull {
  background-color: red;
  grid-column: 1 /-1
}

<div class="wrapper">
  <div class="leftspan">Left spanning 2 rows</div>
  <div class="topRight">Top <br/>Right</div>
  <div class="bottomright">Bottom <br/>Right</div>
  </div>
  <p> or did you mean ?
  <div class="wrapper">
  <div class="left">Left</div>
  <div class="topRight">Top Right</div>
  <div class="bottomfull">Bottom <br/>Right</div>
  </div>

如果您的浏览器理解网格，则呈现：

【讨论】：