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网格而不是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>

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

1 个答案: