<分区>
html - 使用 flexbox 的级联网格布局
我有很多不同高度的盒子，我想要这样的结果:
但是盒子相对于最大的盒子高度对齐。 我将其添加到容器中，但尺寸线是更大的元素。
display: flex;
margin: 9px;
flex-wrap: wrap;
最佳答案
这是现代网格布局的小方法。如果您尝试，您可以轻松地操作网格行 和列!这是一个例子....
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 40px;
}
.wrapper {
margin: 0 0 20px 0;
width: 500px;
height: 400px;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, 100px);
justify-content: center;
align-content: end;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.item1 {
grid-column: 1 / 3;
grid-row: 1/3;
}
.item2 {
grid-column: 1 / 3;
grid-row: 3 / 4;
}
.item3 {
grid-column: 3 / 5;
}
.item4 {
grid-column: 3 / 5;
grid-row: 2/4;
}
.item5 {
grid-column: 5 / 7;
grid-row: 1/ 3;
}
.item6 {
grid-column: 5 / 7;
grid-row: 3/ 4;
}<div class="wrapper">
<div class="box item1">One</div>
<div class="box item2">Two</div>
<div class="box item3">Three</div>
<div class="box item4">Four</div>
<div class="box item5">Five</div>
<div class="box item6">Six</div>
</div>关于html - 使用 flexbox 的级联网格布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47628351/