<分区>
我有一个简单的盒子网格,我想用 Flexbox 响应式地隔开它。
盒子的数量是由用户生成的,所以我需要一些动态工作的东西。 Here's a codepen snippet我所在的位置:
<div class="wrap">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
CSS:
.wrap{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.thumb{
width:150px;
height:150px;
background-color:black;
margin-bottom:20px;
}
上面的代码看起来像这样:
这是我想要的样子:
如何使用 flexbox 实现这一点?我想避免 % 边距,并尽可能让 flexbox 在这里完成所有工作,因为它在响应式设置中工作得非常好。