示例
<div class="container">
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
</div>
.container{
display: flex;
justify-content: space-between;
}
效果
解决思路
1.将最后一个元素的margin-right
设置为margin-right:auto
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list {
background-color: skyblue;
width: 100px;
height: 100px;
margin: 10px;
}
/* 最后一项margin-right:auto */
.list:last-child {
margin-right: auto;
}
2.使用height:0
宽度与flex中子项一样宽的元素进行填充
<div class="container">
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="xxx" v-for="i in 6" :key="i"></div>
</div>
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
>.list {
background-color: skyblue;
width: 100px;
height: 100px;
}
>.xxx{
width: 100px;
}
}
3.使用grid布局吧,grid布局不存在这样的问题