如何使 div 跨越网格中的多行和多列? [英] How can I make a div span multiple rows and columns in a grid?

问题描述

基于

解决方案

保持 HTML 原样，布局在 flexbox 中是不可能的.这主要是因为 2 x 2 框占据了第三和第四列.你能得到的最接近的是:

#wrapper{显示:弹性；弹性方向:列；flex-wrap: 包裹;对齐内容:flex-start；高度:180px；宽度:516px；}.堵塞 {宽度:90px；弹性:0 0 50px；边距:5px；背景颜色:红色；}.大{弹性基础:110px；}

<div class="block"></div><div class="block"></div><div class="block"></div><div class="块更大"></div><div class="block"></div><div class="block"></div><div class="块更大"></div><div class="block"></div><div class="块更大"></div><div class="block"></div><div class="block"></div><div class="block"></div>

如您所见，大框在列之间被分解.

如您引用的其他帖子中所述，因为您的子元素具有固定的高度 (.块)，我们可以确定容器的高度(.wrapper).

通过知道容器的高度，可以使用flex-direction:column和flex-wrap:wrap来实现上面的布局.

容器上的一个固定高度作为断点，告诉 flex 项目在哪里换行.

或者，如果您可以添加容器，则布局很容易.只需创建四个嵌套的 flex 容器来容纳第 1、2、3-4 和 5 列，就大功告成了.

#wrapper {显示:弹性；宽度:516px；}部分 {显示:弹性；弹性方向:列；}.堵塞 {宽度:90px；高度:50px；边距:5px；背景颜色:红色；}.更大的{弹性基础:110px；}部分:第n个孩子(3){弹性方向:行；flex-wrap: 包裹;弹性:0 0 200px；}section:nth-child(3)>.block:last-child {弹性:0 0 190px；高度:110px；}

<部分><div class="block"></div><div class="block"></div><div class="block"></div></节><部分><div class="块更大"></div><div class="block"></div></节><部分><div class="block"></div><div class="block"></div><div class="block"></div></节><部分><div class="block"></div><div class="block"></div><div class="block"></div></节>

否则，请参阅此帖子以了解更多详细信息和其他选项:

• 是否可以让 flex 项目与其上方的项目紧密对齐?

Building off of a previous question, I'm trying to add bigger blocks to my grid layout. In the last question, I needed to have a div span multiple rows. The problem now is that I need a div to span multiple rows and columns.

If I have a five-element row, how could I put bigger elements in the middle of it? (as float puts it naturally on the side).

Here's an example snippet:

#wrapper{
  width: 516px;
}
.block{
  display: inline-block;
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}
.bigger{
  height: 110px;
}
.larger{
  height: 110px;
  width: 190px;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block larger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

I don't want to use display: grid for the wrapper element, as Can I Use states this is a pretty on-the-edge technology right now. I was hoping for a non-grid, non-table solution.

Here's what I would like to have from the snippet above

解决方案

Keeping your HTML as-is, the layout is not natively possible with flexbox. This is primarily because of the 2 x 2 box occupying the third and fourth columns. The closest you can get is this:

#wrapper{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 180px;
  width: 516px;
}
.block {
  width: 90px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: red;
}
.bigger{
  flex-basis: 110px;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

As you can see, the big box is broken up between columns.

As mentioned in the other post you referenced, since you have fixed heights on your child elements (.block), we can determine the height of the container (.wrapper).

By knowing the height of the container, the layout above can be achieved using flex-direction: column and flex-wrap: wrap.

A fixed height on the container serves as a breakpoint, telling flex items where to wrap.

Alternatively, if you can add containers, then the layout is easy. Just create four nested flex containers to hold columns 1, 2, 3-4 and 5, and you're done.

#wrapper {
  display: flex;
  width: 516px;
}

section {
  display: flex;
  flex-direction: column;
}

.block {
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}

.bigger {
  flex-basis: 110px;
}

section:nth-child(3) {
  flex-direction: row;
  flex-wrap: wrap;
  flex: 0 0 200px;
}

section:nth-child(3)>.block:last-child {
  flex: 0 0 190px;
  height: 110px;
}

<div id="wrapper">
  <section>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </section>
  <section>
    <div class="block bigger"></div>
    <div class="block"></div>
  </section>
  <section>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </section>
  <section>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </section>
</div>

Otherwise, see this post for more details and other options:

• Is it possible for flex items to align tightly to the items above them?

这篇关于如何使 div 跨越网格中的多行和多列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！