嗨,我正在重新制作google chrome主页,但我似乎无法在页面底部完成该部分,因为最常用的应用程序我正在尝试通过display 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>
非常感谢您的帮助:)
答案 0 :(得分:0)
如果图标大小相同,则只需要父div上的justify-content
属性,即 “ mostUsedApps” 。
如果它们的大小不同,则需要提供指向Codepen或codesandbox的链接,否则将很难提供帮助。