使两个相邻元素表现得像一个元素 [英] Making two adjacent elements behave like a single element

问题描述

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

说这是我的标记:

<div>花</div><div>树</div><div>蜜蜂</div>

这就是我想要的桌面:

<代码>|||||花||树 |___________||||||蜜蜂 ||||

在移动设备上:

<代码>|花||________||||树 ||________||||蜜蜂 |

所以如果我能在桌面上将 Flower 和 Bee 组合成一个单独的 flex 列，那就太好了.

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

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

没有在任何盒子上设置高度.

我已经将 Flexbox 用于网格，并且不想添加任何包装器.

解决方案

您可以使用 CSS 网格布局来实现.使用 grid-template-columns 和 media-queries

.container {显示:网格；网格间距:10px；网格模板列:重复(2，1fr)；}.container div {背景:灰色；}.container div:nth-of-type(2) {网格列:1；网格行:1/3；}@media(最大宽度:768px){.容器 {网格模板列:1fr；}.container div:nth-of-type(2) {网格行:2；}}

<div>花</div><div>树</div><div>蜜蜂</div>

Is it possible to make two adjacent elements behave like a single element, in a flexbox layout?

Say this is my markup:

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

This is what I want on desktop:

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

And on mobile:

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

So if I could combine Flower and Bee into a single flex column on desktop, it would be nice.

I could probably use a float but I'm already using a flex grid.

This is a page with variable content, I would want the content to grow vertically, and for a vertical scrollbar to appear on the page, if it goes beyond the viewport.

There is no height set on any of the boxes.

I am already using Flexbox for the grid and would not want to add any wrappers.

解决方案

you can do it with CSS grid layout. using grid-template-columns and 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>

这篇关于使两个相邻元素表现得像一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！