Html 基于flexbox的级联网格布局

我有很多不同高度的盒子，我希望得到以下结果：

但长方体是相对于最大长方体高度对齐的。 我将其添加到容器中，但尺寸线是更大的元素

display: flex;
margin: 9px;
flex-wrap: wrap;

---

这是现代网格布局的一个小方法。如果您尝试，您可以轻松地操纵网格行和列！这里有一个例子

html{
框大小：边框框；
}
*,
*：之前，
*：之后{
框大小：继承；
}
身体{
利润率：40像素；
}
.包装纸{
利润率：0.20px0；
宽度：500px；
高度：400px；
显示：网格；
栅隙：10px；
网格模板列：重复（6，1fr）；
网格模板行：重复（3100px）；
证明内容：中心；
对齐内容：结束；
}
.盒子{
背景色：#444；
颜色：#fff；
边界半径：5px；
填充：20px；
字体大小：150%；
}
.项目1{
网格柱：1/3；
网格行：1/3；
}
.项目2{
网格柱：1/3；
网格行：3/4；
}
.项目3{
网格柱：3/5；
}
.项目4{
网格柱：3/5；
网格行：2/4；
}
.项目5{
网格柱：5/7；
网格行：1/3；
}
.项目6{
网格柱：5/7；
网格行：3/4；
}

一个
两个
三
四
五
六