CSS-flex网格之间的边距

我用flex创建了一个简单的网格布局，我想要一个3x3块的网格，每个块之间留有一个边距

如果我加上一个边距，它就是2x5

我怎么能让它有3x3，每个块之间有一个边距

.wrap{
最大宽度：1000px；
边框：1px实心#ddd；
显示器：flex；
柔性包装：包装；
}
.街区{
宽度：33%；
高度：100px；
边框：1px纯红；
保证金：5px；
}

---

您可以通过使用flexbox属性来获得所需的结果

调整内容：间距占用元素的剩余空间并在元素之间传播

因此，我所做的只是使宽度略小于33%，这样我们就有了剩余的空间，并添加了
justify content:space-between到包装器


.wrap{
最大宽度：1000px；
边框：1px实心#ddd；
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.街区{
宽度：30%；
高度：100px；
边框：1px纯红；
边缘底部：15px；
}
您可以通过使用flexbox属性来获得所需的结果
调整内容：间距占用元素的剩余空间并在元素之间传播

因此，我所做的只是使宽度略小于33%，这样我们就有了剩余的空间，并添加了
justify content:space-between到包装器


.wrap{
最大宽度：1000px；
边框：1px实心#ddd；
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.街区{
宽度：30%；
高度：100px；
边框：1px纯红；
边缘底部：15px；
}
您可以使用
calc
函数减去边距（每边10px=5px），还可以在所有HTML元素上指定
框大小：边框框
，这样您就不必在计算中包含边框


*{
框大小：边框框
}
.包裹{
最大宽度：1000px；
边框：1px实心#ddd；
显示器：flex；
柔性包装：包装；
}
.街区{
宽度：钙（33.3333%-10px）；
高度：100px；
边框：1px纯红；
保证金：5px；
}
您可以使用
calc
函数减去边距（每边10px=5px），还可以在所有HTML元素上指定
框大小：边框框
，这样您就不必在计算中包含边框


*{
框大小：边框框
}
.包裹{
最大宽度：1000px；
边框：1px实心#ddd；
显示器：flex；
柔性包装：包装；
}
.街区{
宽度：钙（33.3333%-10px）；
高度：100px；
边框：1px纯红；
保证金：5px；
}

如果使用32%的块宽，则有3x3；如果使用32%的块宽，则有3x3