Question

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

说这是我的标记：

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

这就是我想要的桌面：

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

在移动设备上：

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

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

我可以使用浮动但我已经使用了弹性网格。

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

任何方框都没有设置高度。

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: