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

问题描述

是否有可能使两个相邻的元素像flexbox布局中的单个元素一样运行？说这是我的标记：

 < div class =flex-container> 
< div> Flower< / div> 
< div>树< / div> 
< div> Bee< / div> 
< / div> 
  

这就是我在桌面上所需要的：

  | | | 
 | |花| 
 |树| ___________ | 
 | | | 
 | | Bee | 
 | | | 
  

在手机上：

  |花| 
 | ________ | 
 | | 
 |树| 
 | ________ | 
 | | 
 | Bee |因此，如果我可以将Flower和Bee结合到桌面上的一个单独的flex列中，那将会很不错。 
 
 
 
我可以使用一个浮点数，但是我已经使用了一个flex grid。
 
 
 
这是一个页面与可变内容，我想要的内容垂直增长，并为垂直滚动条出现在页面上，如果它超出了视口。 
 
 
 
没有任何高度的设置。
 
 
 
我已经在网格中使用Flexbox不希望添加任何包装。
解决方案
您可以使用CSS网格布局来做到这一点。使用 grid-template-columns 和 media-queries  
 
 
 
 
 
 
  .container {display：grid; grid-gap：10px; grid-template-columns：repeat（2，1fr）}。container div {background：grey} .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>花与LT; / DIV> < DIV>树< / DIV> < div> Bee< / 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屋！