css - 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>

甚至可能吗？谢谢您的帮助。

标签： css

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>