在弹性盒网格中嵌入弹性项目[重复]

Question

我在根据以下图像布局在 flexbox 中创建网格时遇到问题。我花了两天时间弄清楚如何在不设置位置的情况下解决它：absoulte hacks。有人可以帮我用 flex good practices 解决它吗？

Answer 1

我不是 flexbox 方面的专家，但 Rikin 似乎是对的。网格更适合这样的布局。

在 flexbox 中，您必须将 flex-container 放入 flex-container 中，以获得您想要的布局。试试我下面的代码，你会明白的。不过，你必须自己弄清楚左边的中间列。

干杯！

HTML

<div class="wrapper">
<div class="col-left">
<div class="col-left-row-1 color green">
  Lorem 1
</div>
<div class="col-left-row-2 color yellow">
  Lorem 2,3,4
</div>
<div class="col-left-row-3 color  red">
  Lorem 5
</div>
</div>
<div class="col-right color blue">
  Lorem 6
</div>
</div>

CSS

.wrapper {
  display: flex;
  height: 500px;
  color: darkblue;
}
.col-right {
  flex-basis: 30%;
}
.col-left {
  flex-basis: 70%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.red {
  background-color: red;
  flex-grow: 1;
}
.green {
  background-color: green;
  flex-grow: 3;
}
.blue {
  background-color: blue;
}
.yellow {
  background-color: yellow;
  flex-grow: 2;
}
.color {
  padding: 30px;
  margin: 2px;
}