Flexbox，按列包装项目[重复]答案

【问题标题】：Flexbox, wrap items by column [duplicate]Flexbox，按列包装项目[重复]
【发布时间】：2019-05-08 04:42:36
【问题描述】：

我正在尝试使用 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>

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

【问题讨论】：

flex 的额外黑客，为什么不 css-grid ??
嗬，我不知道它存在，真丢脸，我要去看看！我完全愿意不使用 flexbox
这应该正是你所追求的。
我同意@philipp 的观点，如果您不想更改标记，CSS 网格绝对是该布局的最佳选择。
嗯，它似乎工作！ jsfiddle.net/2z5haer7/2 非常感谢你们。我不知道您是否仍然可以回答该问题，因为它已被标记为重复

标签： css

【解决方案1】：

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

【讨论】：

【解决方案2】：

试试这个代码

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

【讨论】：

是的，这会起作用，但正如我在问题中所说的那样，它会改变我的 html 标记和“我不希望改变它并用 CSS 直观地组织我的盒子”。但感谢您抽出时间来帮助我！我要试试@philipp 对css-grid的评论