Flexbox，按列包装项目

Question

我正在尝试通过flexbox功能控制包装器中包含的某些块的位置。这是我最后想要的：

这是我要使用的标记。我不想更改它，并使用CSS直观地整理我的盒子：

<div class="wrapper">
  <div class="list-1">
    Liste 1
  </div>
  <div class="list-2">
    Liste 2
  </div>
  <div class="list-3">
    Liste 3
  </div>
</div>

我尝试了多种方法，但是没有用。这是我附带的最接近的东西，但是list-3仅在list-2也开始时才开始：

.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
div[class^="list-"] {
  text-align: center;
}
.list-1 {
  background: red;
  flex-basis: 80%;
  line-height: 50px;
}
.list-2 {
  background: pink;
  flex-basis: 80%;
  line-height: 50px;
}
.list-3 {
  background: green;
  flex-basis: 20%;
  line-height: 100px;
}

<div class="wrapper">
  <div class="list-1">
    Liste 1
  </div>
  <div class="list-2">
    Liste 2
  </div>
  <div class="list-3">
    Liste 3
  </div>
</div>

有可能吗？谢谢您的帮助。

Answer 1

尝试此代码

将div添加到first and second list并使用flex-basis:80% for new div

我添加课程

.list {
  flex-basis: 80%;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

div[class^="list-"] {
  text-align: center;
}

.list-1 {
  background: red;
  flex-basis: 80%;
  line-height: 50px;
}

.list-2 {
  background: pink;
  flex-basis: 80%;
  line-height: 50px;
}

.list-3 {
  background: green;
  flex-basis: 20%;
  line-height: 100px;
}

.list {
  flex-basis: 80%;
}

<div class="wrapper">
  <div class="list">
    <div class="list-1">
      Liste 1
    </div>
    <div class="list-2">
      Liste 2
    </div>
  </div>
  <div class="list-3">
    Liste 3
  </div>
</div>

Answer 2

.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* this is for the children of flex to be of equal height. */
}
div[class^="list-"] {
  text-align: center;
}
.list-1 {
  background: red;
  line-height: 200px;
  height:200px;
}
.list-2 {
  background: pink;
  line-height: 100px;
  height:100px;
}
.list-3 {
  background: green;
  flex-basis: 20%;
  /* following 3 codes is for centered the liste3. deletable */
  display:flex;
  align-items:center;
  justify-content:center;
}

.column {
  display:flex;
  flex-direction:column;
  flex:4;
}

 <div class="wrapper">
   <div class="column">
  <div class="list-1">
    Liste 1
  </div>
  <div class="list-2">
    Liste 2
  </div>
   </div>
  <div class="list-3">
    Liste 3
  </div>
</div>