更改 div 与背景图片之间的弹性间距

Question

您好，我正在重新制作 google chrome 主页，但我似乎无法完成页面底部最常用的应用程序的部分，我正在尝试通过显示来完成flex 因为它是内联的，但我不能得到正确的间距，它不均匀或变大或变小，这就是我想要的样子......

这是我得到的

最上面的是我需要得到的。注意间距太小在中间它太大了，我正在寻找它恰到好处证明内容似乎不影响间距？这是 css

.youtube{
background-image: url(youtube.png);


}
.facebook{
background-image: url(facebook.png);

}

.roblox{
background-image: url(roblox.png);


}

.Agar{
 background-image: url(Agar.png);


  }

    .gmail{
background-image: url(gmail.png);


 }
  .rowCell{
justify-content: space-around;
align-items: center;
position: relative;  
background-repeat: no-repeat;
width: 200px;
height: 150px;
margin-top: -589px;
left: 422px;
 }
  .mostUsedApps{
     width: 42%;
display: flex;
justify-content: space-between;
justify-content: space-around;
align-items: center;
}

这里是 html

   <div class = 'mostUsedApps'>

   <div class = 'youtube rowCell'></div>

   <div class = 'facebook rowCell'   ></div>

   <div class = 'roblox rowCell'></div>


   <div class = 'Agar rowCell'></div>

   <div class = 'gmail rowCell'></div>

   </div>

非常感谢任何帮助，谢谢:)

Answer 1

如果您的图标大小相同，那么您只需要在父 div 上添加 justify-content 属性，即 "mostUsedApps".

如果它们大小不同，那么您需要提供 link 给 codepen 或 codesandbox，否则很难提供帮助。

更改 div 与背景图片之间的弹性间距

change the flex spacing between div with background image

html

css

spacing

flexbox