Html 如何使用flex box而不是网格进行此设计？

这是一个我用HTML、CSS和网格制作的设计。但我想用flex box而不是grid重新制作它。本设计采用网格：

源代码：

演示：

*{
框大小：边框框；
}
.家长{
保证金：20px自动；
宽度：800px；
高度：500px；
背景色：#ddd；
显示：网格；
网格模板列：重复（4，自动）；
网格模板行：重复（3，自动）；
间隙：10px 10px；
证明内容：之间的空间；
}
.家长组{
背景色：红色；
颜色：白色；
填充：20px；
字体大小：30px；
字体大小：粗体；
文本对齐：居中；
}

CSS
1.
2.
3.
4.
5.
6.
7.
8.
9

我将这样做，首先避免html标记中的样式，并使用istead和页边距之间的空间来定位元素

*{
框大小：边框框；
}
.家长{
保证金：20px自动；
宽度：800px；
高度：500px；
背景色：#ddd；
显示器：flex；
弯曲方向：立柱；
}
.行{
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
身高：100%；
宽度：100%；
填充物：5px；
}
.路政署{
背景色：红色；
颜色：白色；
填充：20px；
字体大小：30px；
字体大小：粗体；
文本对齐：居中；
边框：0.01px点黑色；
宽度：50px；
身高：100%；
}

CSS
1.
2.
3.
4.
5.
6.
7.
8.
9

除了flex box中的数字没有正确对齐外，还有什么问题？因为结果和我写的代码一样糟糕吗？@fadisafou检查我下面的答案，看看你是否更喜欢这样