我有一个列表视图，其中所有列表项都设计为看起来像卡片.我用justify-content: space-between来平均分配卡片.我需要在一个宽屏幕上一行显示5张卡，但这些卡应该放在左边，留出相同的间隙.
当我需要一排有3张牌时，这个代码工作得很好，但当我有5张牌在一行时就不行了.在本例中，我将<ul>和<li>替换为<div>，将.parent和.child类替换为<div>.
我怎么才能修好它？
.parent {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
gap: 20px;
box-sizing: border-box;
justify-content: space-between;
background-color: lightgreen;
}
.parent::after {
content: "";
width: 16%;
height: 0;
}
.child {
flex-basis: 16%;
background-color: blue;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
@media only screen and (max-width : 1024px) {
/* for tablet */
.parent::after {
width: 46%;
}
.child {
flex-basis: 46%;
}
}
@media only screen and (max-width : 768px) {
/* for mobile */
.parent::after {
display: none;
}
.child {
flex-basis: 100%;
}
}<div class="parent">
<div class="child"> <span>1</span> </div>
<div class="child"> <span>2</span> </div>
<div class="child"> <span>3</span> </div>
<div class="child"> <span>4</span> </div>
<div class="child"> <span>5</span> </div>
</div>