Flexbox，按列包装项目

Question

我试图控制包含在带有柔性盒功能的包装中的一些块的位置。以下是我最后想要的：

​

​

这是我想要使用的标记。我不想改变它，并且用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>

我尝试过多种方法，但都不起作用。下面是我所提供的最接近的东西，但列表3只在列表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>

​