效果图
解决办法
1.父元素定高的情况下,直接使用 align-content: space-between;
ul{
list-style: none;
display: flex;
height: 614px;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;//左右居中 可选
align-content: space-between;//上下居中 可选
}
ul li{
width: 234px;
height: 300px;
background-color: rgb(255, 2, 192);
}
2.父元素不定高的情况下
1)设置需要更改间距的元素(li)的margin-bottom:8px,然后用父容器(ul)的margin-bottom: -8px;来抵消。
ul{
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: -8px;
justify-content: space-between;
align-content: space-between;
}
li{
margin-bottom: 8px;
}
ul li{
display: flex;
width: 234px;
height: 300px;
background-color: rgb(255, 2, 192);
}