Html Flex布局-让容器中的元素位于同一行中

我有一个关于flex的问题，我不能在同一行上制作子图表

我的当前页面： 主图表
子图1
子图2
子图3
子图4
子图5
子图6
子图7
分图8

这就是我想要的： 主图表
子图1子图2
子图3子图4
子图5子图6
子图7子图8

这是我的

HTML

.dashboard{
显示器：flex；
柔性包装：包装；
}
.主图表{
高度：600px；
利润率：10px；
填充：20px；
弹性：1100%；
边界半径：10px；
背景：#BDCCFF；
}
.行{
弹性：1100%；
}
.子图表{
弹性基准：50%；
高度：400px；
利润率：10px；
填充：20px；
边界半径：10px；
背景：粉红色；
}

我的Flex 1
主图表
子图1
分图2
分图3
分图4
分图5
分图6
分图7
分图8

只需更改

flex:150%在行类中

.row {
    flex: 1 50%;
}

这很有效。它应该除以所需的子图表的数量。例如，如果您想要3，则将其设置为flex:133.33%

.row {
    flex: 1 50%;
}

将
.row{flex:1100%；}
更改为
.row{flex:150%；}