我特别寻找一个2行的网格- row1有2列,row2有3列,其中每列/行(网格中的ie.item)大小相等。它可以使用空的div,但显然这不是首选的解决方案……
我已经包含了一些基本的html / css示例来说明我的意思,但我希望在不使用空div的情况下实现类似的功能。
CSS
html, body {
height: 100%;
margin: 0;
}
.grid {
min-height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.grid > div {
display: flex;
flex-basis: calc(33.33% - 14px);
justify-content: center;
flex-direction: column;
}
.grid > div > div {
display: flex;
justify-content: center;
flex-direction: row;
}
.box { margin: 10px 0 10px 10px}
.box1 { background-color: red; }
.box2 { background-color: orange; }
.box3 { background-color: blue; }
.box4 { background-color: grey; }
.box5 { background-color: purple; }
HTML
<div class="grid">
<div class="box box1">
<div>
one
</div>
<div>
example content
</div>
</div>
<div class="box box2">
<div>
two
</div>
<div>
example content
</div>
</div>
<div></div>
<div class="box box3">
<div>
three
</div>
</div>
<div class="box box4">
<div>
four
</div>
</div>
<div class="box box5">
<div>
five
</div>
</div>
https://stackoverflow.com/questions/51486641
复制相似问题