Html 柔性箱彼此不对齐

我有两排flexbox。第一行有3个项目，每个项目占4列。第二行有2个项目，一个占4列，另一个占8列。但当两行堆叠在一起时，每行的大小不匹配。i、 e.每行的第一项有不同的尺寸

以下是我的意思：

.flex显示{
显示器：flex；
}
.漂亮的容器{
背景色：rgb（38,47,53）；
保证金：5px；
填充：10px；
位置：相对位置；
}
.集装箱{
位置：相对位置；
宽度：100%；
最大宽度：1200px；
保证金：0自动；
填充：20px 20px；
框大小：边框框；
背景色：rgb（54,69,79）；
}
.four.columns{宽度：计算（100%/3）；}
.8列{宽度：计算（100%/3*2）；}
身体{
字体大小：1.5em；/*当前ems导致chrome错误解释主体元素上的rems*/
线高：1.6；
字体大小：400；
字体系列：“开放式Sans”、“Helvetica Neue”、“Helvetica Neue”、Helvetica、Arial、Sans serif；
颜色：#ebebebeb；}

项目1
项目2
项目3
项目4
项目5

我建议您在解决方案中使用CSS网格。我已经在评论中解释了

网格区域

。否则其他款式的就归你了

正文{
字号：1.5em；
/*目前ems导致chrome bug错误地解释身体元素上的rems*/
线高：1.6；
字体大小：400；
字体系列：“开放式Sans”、“Helvetica Neue”、“Helvetica Neue”、Helvetica、Arial、Sans serif；
颜色：#EBEBEB；
}
.集装箱{
显示：网格；
网格模板列：1fr 1fr 1fr；/*3列*/
网格模板行：1fr 1fr；/*2列*/
网格列间距：15px；/*列之间的边距*/
网格行间距：15px；/*行间距*/
背景：#36454F；
填充：10px；
}
.container>div{
填充：5px15px；
背景色：rgb（38,47,53）；
底边：2倍纯色灰色；
}
.顶级1{
网格区域：1/1/2/2；/*从1开始，在2结束*/
}
·顶尖艺人1{
网格区域：1/2/2/4；/*行从1开始到2结束，列从2开始到4结束*/
}
.顶级2{
网格区域：2/1/3/2；/*行开始于2，结束于3，列开始于1，结束于2*/
}
.顶尖艺人2{
网格区域：2/2/3/3；/*行开始于2，结束于3，列开始于2，结束于3*/
}
.摘要{
网格区域：2/3/3/4；/*行开始于2，结束于3，列开始于3，结束于4*/
}

顶轨
顶轨
顶尖艺术家
顶尖艺术家
总结

在两者之间添加边距，因此当只有两个边距时，边距使用的空间减少了10px。你需要将这个额外的缺失添加到更大的框中

flex-shrink

，

flex-grow

在这里没有任何帮助，

flex-basis

还需要计算那些10px的flex不带排水沟系统；）

.flex显示{
显示器：flex；
}
.漂亮的容器{
背景色：rgb（38,47,53）；
保证金：5px；
填充：10px；
位置：相对位置；
框大小：边框框/*将在计算中包括填充和边框*/
}
.集装箱{
位置：相对位置；
宽度：100%；
最大宽度：1200px；
保证金：0自动；
填充：20px 20px；
框大小：边框框；
背景色：rgb（54,69,79）；
}
.four.columns{宽度：计算（100%/3）；}
.8.columns{width:calc（100%/3*2+10px）；/*当这意味着不占用两个框的空间时，添加flex缺少和看不到的10px边距*/}
身体{
字体大小：1.5em；/*当前ems导致chrome错误解释主体元素上的rems*/
线高：1.6；
字体大小：400；
字体系列：“开放式Sans”、“Helvetica Neue”、“Helvetica Neue”、Helvetica、Arial、Sans serif；
颜色：#ebebebeb；}

项目1
项目2
项目3
项目4
项目5

可能重复：请注意网格或更早版本。。。不幸的是，截至2019年7月，它仍然存在。。。