<div class="content">
<span class="item">1</span>
<span class="item">2</span>
<span class="item">3</span>
<span class="item">4</span>
<span class="item">5</span>
<span class="item">6</span>
<span class="item">7</span>
</div>
.content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.item {
width: calc(25% - 10px);
height: 200px;
margin-bottom: 20px;
background: pink;
}
}
以上是正常操作,然后就得到了:
利用伪类元素就可以达到我想要的效果,排列对齐:
.content:after {
content: "";
width: calc(25% - 10px); // 宽就等于你设置的每个item的宽
}