更改div与背景图片之间的弯曲间距

时间:2019-02-18 14:35:19

标签: html css css3 flexbox spacing

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

这就是我得到的

enter image description here enter image description here enter image description here 最重要的是我需要得到的。 注意间距很小 在中间,它正在变得很大,我正在寻找它是正确的 证明内容似乎不影响间距? 这是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>

非常感谢您的帮助:)

1 个答案:

答案 0 :(得分:0)

如果图标大小相同,则只需要父div上的justify-content属性,即 “ mostUsedApps”

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