如何使用 flexbox 为图像留出边距？答案

【问题标题】：How do I give margin to image using flexbox?如何使用 flexbox 为图像留出边距？
【发布时间】：2018-01-20 19:17:33
【问题描述】：

我希望图像有边距，所以我写了justify-content: space-around，但顶部图像和底部图像之间没有边距。

  
#portfolio {
  background-color: #00C3A9;
  height: 800px;
}
.portfolio_pic {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

<div id="portfolio">  
  <div class="portfolio_pic">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
</div>
</div>

截图：

在这种情况下我该怎么办？谢谢你

【问题讨论】：

边距应该设置为子级，没有其他方法可以在 flex 包裹的行之间设置“排水沟”。显示：网格；有这个选项（grid-gap），不是flex。 ;) .portfolio_pic img {margin:X;} 是实现这一目标的最连贯的方式，以我自己的拙见:)

标签： html image css flexbox

【解决方案1】：

我猜你想要做的是在flexbox 的 flex 行 之间设置空格（如果你有兴趣，请参阅 related issue here） - 所以你可以添加这些规则：

align-content: space-around 垂直间隔 flex 行
height: 100% 占据portfolio div 的高度。

请看下面的演示：

#portfolio {
  background-color: #00C3A9;
  height: 800px;
}
.portfolio_pic {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-content: space-around;
  height: 100%;
}

<div id="portfolio">
  <div class="portfolio_pic">
    <img src="http://via.placeholder.com/350x300" alt="">
    <img src="http://via.placeholder.com/350x300" alt="">
    <img src="http://via.placeholder.com/350x300" alt="">
    <img src="http://via.placeholder.com/350x300" alt="">
    <img src="http://via.placeholder.com/350x300" alt="">
    <img src="http://via.placeholder.com/350x300" alt="">
  </div>
</div>

【讨论】：

这仅在有足够空间用于所有图像标签时才有效。当空间有限时，垂直间距就没有了。
@JanNahody 这取决于 OP 在空间有限时要管理的内容 - 是否溢出...
Flex 应该可以处理动态变量。在这里，OP 必须设置修复大小。抱歉，这不是 flex 的解决方案。使用固定尺寸我们不需要 flex。

【解决方案2】：

您可以尝试像这样为图像添加边距

img { margin-top: 15px; }

或者像这样创建一个具有该样式的类，并为每个图像赋予该类：

.imagesingrid { margin-top: 15px; }
<img class="imagesingrid" src="http://via.placeholder.com/350x300" alt="">

【讨论】：

【解决方案3】：

Flex 是一维的。因此，当您使用justify-content: space-around 时，它会在定义的维度上对其进行管理。行或列。有什么理由不给图像元素留边距？

#portfolio {
  background-color: #00C3A9;
  height: 800px;
}
.portfolio_pic {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

img {
  margin: 20px;
}

<div id="portfolio">  
  <div class="portfolio_pic">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
 <img src="http://via.placeholder.com/350x300" alt="">
</div>
</div>

【讨论】：