如何获取弹性容器中图像之间的垂直间隙

Question

<div class='parent'>
<img class='child' src='...' alt='img'>
<img class='child' src='...' alt='img'>
<img class='child' src='...' alt='img'>
<img class='child' src='...' alt='img'>
<img class='child' src='...' alt='img'>
<img class='child' src='...' alt='img'>
</div>

CSS

.parent{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-content: space-between;
}

.child{
display:block;
width:calc(25% - 10px);
margin:0 auto;
}

图像的水平间隙为 10px，但没有垂直间隙（列中图像之间的距离。

如何在childs和之间没有填充/边距的情况下添加此间隙parent。我只需要图像之间的间隙，但在两个方向上。

此外，图像没有固定的宽度和高度。

Answer 1

这可以是 CSS-grid 而不是 Flexbox 的一个用例：

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px; /*define the distance between elements*/
  border: 1px solid;
}

.child{
  height:50px;
  border:1px solid red;
}

<div class='parent'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>