跨越两行且高度不固定的 CSS Flex 元素

Question

我正在尝试创建一个 flex 容器布局，其中一个 flex 元素应该跨越两行。请参阅下图以获得更好的解释:

这是我的标记:

<div class="container">
    <div class="item item-1">ITEM 1</div>
    <div class="item item-2">ITEM 2</div>
    <div class="item item-3">ITEM 3</div>
</div>

我似乎无法做到这一点，我试过使用 flex-wrap和 flex 的不同组合属性(property)。

我能够通过输入 ITEM 1 来实现这一点& ITEM 2在一个单独的<div> , 但这在较小的屏幕上会出现问题，因此 ITEM 3需要出现在 ITEM 1 之间& ITEM 2 .所以我宁愿保持标记不变并使用 order必要时移动东西的属性。

Answer 1

您可以在额外的 div 上使用 display: contents 来实现您想要的:

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  width: 100%;
}

.holder {
  width: 67%;
}

.item {
  border: 1px solid black;
}

.item-1 {
  margin-bottom: 40px;
}

.item-3 {
  width: 33%;
}

@media screen and (max-width: 700px) {
  .container {
    flex-direction: column;
  }
  .item {
    margin-bottom: 20px;
  }
  .item-1 {
    order: 1;
  }
  .item-2 {
    order: 3;
  }
  .item-3 {
    order: 2;
    width: 100%;
  }
  .holder {
    width: 100%;
    display: contents;
  }
}

<div class="container">
  <div class="holder">
    <div class="item item-1">ITEM 1</div>
    <div class="item item-2">ITEM 2</div>
  </div>
  <div class="item item-3">ITEM 3</div>
</div>