更改div与背景图片之间的弯曲间距 [英] change the flex spacing between div with background image

问题描述

我正在重新制作google chrome主页，但我似乎无法在页面底部完成该部分，因为最常用的应用程序我正在尝试通过display flex进行操作，因为它可以将其内联，但我无法获取我希望它看起来像是不均匀的间距，或者是大或小...

hi i am remaking the google chrome home page but i cant seem to do the part at the bottom of the page were the most used apps are i am trying to do it with display flex because it puts it inline but i cant get the spacing right its uneven or to big or small here is what i want it to look like...

这就是我得到的

最重要的是我需要得到的。
注意到间距是小
，中间是大间距，我在寻找它是正确的
justify-content似乎并不影响间距？
是CSS

the top one is what i need to get. notice that the spacing is to small and in the middle its to big i am looking for it to be just right justify-content doesn't seem to effect spacing? here is the 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>

感谢任何帮助，谢谢：）

Any help is much appreciated,thanks :)

推荐答案

如果您的图标大小相同，则只需在父div上使用 justify-content 属性，即 mostUsedApps 。

If your icons are of same size, then you would just need the justify-content property on your parent div i.e. "mostUsedApps".

如果它们的大小不同，则需要提供指向Codepen的链接或codeandbox，否则将很难提供帮助。

If they are of different size, then you would need to provide a link to codepen or codesandbox, without that it would be difficult to help.

这篇关于更改div与背景图片之间的弯曲间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！