要生成的效果图如下:
解决办法
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:14px
,然后用父容器(ul)的margin-bottom: -14px;
来抵消。
ul{list-style: none;display: flex;flex-direction: row;flex-wrap: wrap;margin-bottom: -14px;justify-content: space-between;align-content: space-between;}li{margin-bottom: 14px;}ul li{display: flex;width: 234px;height: 300px;background-color: rgb(255, 2, 192);}
2)设置需要更改间距的元素(li)的margin-bottom:14px;然后使用结构伪类选择器设置最后的几个元素margin-bottom: 0 ;
ul{list-style: none;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;align-content: space-between;}li{margin-bottom: 14px;}li:nth-child(n+5){margin-top: 0;}ul li{display: flex;width: 234px;height: 300px;background-color: rgb(255, 2, 192);}