html - 使两个相邻元素的行为类似于单个元素

Question

是否可以在 Flexbox 布局中使两个相邻元素的行为类似于单个元素？

说这是我的标记:

<div class="flex-container">
   <div>Flower</div>
   <div>Tree</div>
   <div>Bee</div>
</div>

这就是我想要的桌面效果:

|        |           |
|        |  Flower   |
|  Tree  |___________|
|        |           |
|        |   Bee     |
|        |           |

在移动设备上:

| Flower |
|________| 
|        |
|  Tree  |
|________| 
|        |
|  Bee   |

因此，如果我可以将 Flower 和 Bee 合并到桌面上的单个 flex 列中，那就太好了。

我可能可以使用 float ，但我已经在使用柔性网格。

这是一个内容可变的页面，我希望内容垂直增长，并且如果超出视口(viewport)，页面上会出现垂直滚动条。

任何盒子都没有设置高度。

我已经在网格中使用 Flexbox，并且不想添加任何包装器。

Answer 1

你可以使用 CSS 网格布局来做到这一点。使用grid-template-columns和media-queries

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}

.container div {
  background: gray;
}

.container div:nth-of-type(2) {
  grid-column: 1;
  grid-row: 1 /3;
}

@media (max-width:768px) {
  .container {
    grid-template-columns: 1fr;
  }
  .container div:nth-of-type(2) {
    grid-row: 2;
  }
}

<div class="container">
  <div>Flower</div>
  <div>Tree</div>
  <div>Bee</div>
</div>