CSS Flexbox - 第一行有 1 个项目，第二行有 2 个项目 [重复]答案

【问题标题】：CSS Flexbox – First row with 1 item, second row with 2 items [duplicate]CSS Flexbox - 第一行有 1 个项目，第二行有 2 个项目 [重复]
【发布时间】：2020-07-13 06:41:10
【问题描述】：

我想要实现的是：

所有 3 个项目都在同一级别。第一个有一些额外的 css 类。 Codewise 不可能在右侧的两个项目周围放置一个包装器。所以代码看起来像这样：

<div class="wrapper">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item2 item2-extra"></div>
</div>

目前的 CSS 如下：

.wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}
.item1 {
    margin-bottom: 4rem;
    height: auto;
    order: 1;
    width: calc(50% - 6rem);
    margin: 0 3rem 0 0;
}
.item2 {
    order: 2;
    width: calc(50% - 6rem);
    margin: 0 3rem;
}
.item2-extra {
    order: 3;
}

这样的结果是：

我需要在 Flex 或 CSS-Grid 中使用它来根据视口更改右侧 2 个项目的顺序。

由于所有 3 个项目都可以具有可变高度，并且我必须满足我们关于元素之间空间的 UI/UX 准则，所以右侧的项目不能简单地平均共享高度。第一个结束后，第二个需要开始。

我之前的帖子被标记为重复，所以它告诉我如果问题没有解决，请询问新的。所有 3 个项目都可以具有可变高度，因此 Make a div span two rows in a grid 不是之前标记的解决方案。

代码示例：https://jsfiddle.net/0hc37eo9/

【问题讨论】：

重复的解决方案即使对于不同的高度仍然适用。主要技巧是使用（1）列方向或（2）CSS网格..然后你修改你想要的代码（我正在添加更多重复）

标签： html css flexbox

【解决方案1】：

如果我理解这个问题，我认为您正在寻找......

.wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 200px;
    width: 100%;
}

.item1 {
    background: red;
    order: 1;
    flex: 0 0 100%;
}

.item2 {
    background: blue;
    order: 2;
    flex: 0 0 50%;
}

.item2-extra {
    background: green;
    order: 3;
}

https://codeply.com/p/C8extk0PUH

【讨论】：