Html 如何将此CSS网格重建为Flexbox？

我在谷歌的帮助下建立了一个超级简单的css网格。最重要的部分是元素之间的空间，而不是容器本身周围的空间，只是元素之间的空间。我试图找出如何将这个css网格重建为css flexbox。有人能帮忙吗？或者这在css flexbox中是不可能的

#主页文章网格容器{
显示：网格；
网格模板列：重复（3，1fr）；
柱间距：10px；
行间距：20px；
背景颜色：灰色；
}
.家居用品{
背景颜色：粉红色；
}

XX
XX
XX
XX
XX
XX
XX
XX
XX
XX
XX

这是一个

flex

解决方案

间隙：20px

块之间的距离

宽度：计算（（100%/3）-（40px/3））

-考虑容器中正确分布的

间隙

参数，计算块宽度

#主页文章网格容器{
显示器：flex；
柔性流动：包裹；
间隙：20px；
背景颜色：灰色；
}
.家居用品{
背景颜色：粉红色；
宽度：计算（（100%/3）-（40px/3））；
}

XX
XX
XX
XX
XX
XX
XX
XX
XX
XX
XX