使两个相邻元素表现得像一个元素[重复]答案

【问题标题】：Making two adjacent elements behave like a single element [duplicate]使两个相邻元素表现得像一个元素[重复]
【发布时间】：2018-05-03 03:33:42
【问题描述】：

在 flexbox 布局中是否可以让两个相邻的元素表现得像一个元素？

说这是我的标记：

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

这就是我想要的桌面：

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

在移动设备上：

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

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

我可能会使用浮点数，但我已经在使用弹性网格了。

这是一个内容可变的页面，如果超出视口，我希望内容垂直增长，并在页面上显示垂直滚动条。

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

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

【问题讨论】：

可以在弹性容器上设置固定高度。
@G-Cyr 谢谢，这看起来是一个可以接受的答案。您想根据此评论提出答案吗？我只是对一件事感到好奇；你会碰巧知道为什么.flex div:nth-child(2) { min-height: 100vh } 有效但height: 100vh 无效？
@G-Cyr 实际上它不适用于我的用例，因为“Flower”的高度是可变的 - 它只会包含页面标题。我正在尝试修补它，我认为可以在其上构建一些东西。这是迄今为止最接近的答案 - 除非我决定忽略 IE。
@G-Cyr 我遇到的另一个问题是，当内容太高时，垂直而不是滚动，它会弹出到第三列：codepen.io/rolfen/pen/bYLqKa 我想我只需要引入一些额外的 HTML 元素。
??有趣的是，我之前的评论不再存在了？ ...实际上最好的是网格系统，但不幸的是还没有跨浏览器:)。我分叉了codepen.io/gc-nomade/pen/EboBwL，包括开关上的浮动，它可能会更好一点....：codepen.io/gc-nomade/pen/pdaVOO。

标签： html css layout flexbox

【解决方案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>

【讨论】：

谢谢。很高兴知道！我使用的是网格布局，但因为 IE 而迁移到了 flexbox。