如何在 flex 容器中获取图像之间的垂直间隙

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>