我完成了我的网站,但我没有意识到 safari 不支持 flexbox gap。有没有办法解决这个问题而不会搞砸任何事情?这主要用于我的媒体查询。
<div class="social-media">
<a href="https://github.com/"><img class="social-media__icon" src="img/github.png" alt="Github"></a>
<a href="https://www.linkedin.com/"><img class="social-media__icon" src="img/linkedin.png" alt="LinkedIn"></a>
</div>
.social-media {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 8rem;
margin-top: 10rem;
padding-bottom: 2rem;
}
.social-media img {
width: 90px;
height: 90px;
}
@media only screen and (max-width: 400px) {
.social-media {
gap: 3rem;
margin-top: 5rem;
}
.social-media img {
width: 62px;
height: 62px;
}
}
Run Code Online (Sandbox Code Playgroud)