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...
这就是我得到的
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>
非常感谢任何帮助,谢谢:)
如果您的图标大小相同,那么您只需要justify-content
你的父 div 上的属性,即“最常用的应用程序”.
如果它们的大小不同,那么您需要提供 codepen 或codesandbox 的链接,否则将很难提供帮助。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)