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), интервал которого необходимо изменить: 14 пикселей, затем используйте селектор псевдокласса структуры, чтобы установить для последних нескольких элементов поля нижнего предела: 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);
}