建立a previous question,我正在尝试为我的网格布局添加更大的块.在最后一个问题中,我需要一个div跨度多行.现在的问题是我需要一个div来跨越多个行和列.
如果我有一个五行元素,我怎么能在它的中间放置更大的元素？ (因为浮动将它自然地放在一边).
这是一个示例代码段：
#wrapper{
width: 516px;
}
.block{
display: inline-block;
width: 90px;
height: 50px;
margin: 5px;
background-color: red;
}
.bigger{
height: 110px;
}
.larger{
height: 110px;
width: 190px;
}
我不想将display: grid用作包装元素,因为我可以使用states这是一个非常先进的技术.我希望有一个非网格,非表格解决方案.
以下是我想从
以上的片段中获得的内容
最佳答案
保持HTML原样,使用flexBox本身不可能进行布局.这主要是因为占据第三和第四列的2 x 2盒子.你能得到的最接近的是：
#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;
}
正如您所看到的,大盒子在列之间被分解.
如other post you referenced中所述,由于您的子元素(.block)具有固定的高度,因此我们可以确定容器的高度(.wrapper).
通过了解容器的高度,可以使用flex-direction：column和flex-wrap：wrap来实现上面的布局.
容器上的固定高度用作断点,告诉flex项目在哪里换行.
或者,如果您可以添加容器,则布局很容易.只需创建四个嵌套的flex容器来容纳第1,2,3-4和5列,就可以了.
#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;
}
否则,请参阅此帖子以获取更多详细信息和其他选项：
> Is it possible for flex items to align tightly to the items above them?
