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

Posted 2023-03-05

【中文标题】如何使用 flexbox 为图像留出边距？

【英文标题】：How do I give margin to image using 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" >
 <img src="http://via.placeholder.com/350x300" >
 <img src="http://via.placeholder.com/350x300" >
 <img src="http://via.placeholder.com/350x300" >
 <img src="http://via.placeholder.com/350x300" >
 <img src="http://via.placeholder.com/350x300" >
</div>
</div>

截图：

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

【问题讨论】：

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

【参考方案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" >
    <img src="http://via.placeholder.com/350x300" >
    <img src="http://via.placeholder.com/350x300" >
    <img src="http://via.placeholder.com/350x300" >
    <img src="http://via.placeholder.com/350x300" >
    <img src="http://via.placeholder.com/350x300" >
  </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" >

【参考方案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" >
 <img src="http://via.placeholder.com/350x300" >
 <img src="http://via.placeholder.com/350x300" >
 <img src="http://via.placeholder.com/350x300" >
 <img src="http://via.placeholder.com/350x300" >
 <img src="http://via.placeholder.com/350x300" >
</div>
</div>