CSS-弹性网格之间的边距

Question

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

如果我加上一个边距，它就会变成2x5。

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

.wrap{
max-width: 1000px;
border: 1px solid #ddd;
display: flex;
flex-wrap: wrap;
}
.block{
width: 33%;
height: 100px;
border: 1px solid red;
margin: 5px;
}

<div class="wrap">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>

Answer 1

您可以使用flexbox属性justify-content: space-between;来获得所需的结果，该属性占用元素的剩余空间并在元素之间进行扩展

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

.wrap{
max-width: 1000px;
border: 1px solid #ddd;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.block{
width: 30%;
height: 100px;
border: 1px solid red;
margin-bottom: 15px;
}

<div class="wrap">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>

Answer 2

您可以使用calc函数减去边距(每侧10px=5px(，还可以在所有HTML元素上指定box-sizing: border-box，这样您就不必在计算中包含边框。

* {
box-sizing: border-box
}
.wrap{
max-width: 1000px;
border: 1px solid #ddd;
display: flex;
flex-wrap: wrap;
}
.block{
width: calc(33.3333% - 10px);
height: 100px;
border: 1px solid red;
margin: 5px;
}

<div class="wrap">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>