Safari的Flexbox间隙解决方法

我完成了我的网站,但我没有意识到 safari 不支持 flexbox gap。有没有办法解决这个问题而不会搞砸任何事情?这主要用于我的媒体查询。

<div>
            <a  href="https://github.com/"><img src="img/github.png" alt="Github"></a>
            <a  href="https://www.linkedin.com/"><img 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;
        }
    }

回答

使用Lobotomized owl 选择器:.parent > * + * {}添加一个 margin-left ,让你在另一个元素之后的元素之间留出空间,这样你就可以消除当你将边距直接放在子元素的第一个元素 ( .social-media img{})时它产生的不需要的边距

    .social-media > * + * { margin-left: 8rem;}

您可以在此处阅读有关Lobotomized Owl Selector 的更多信息

编辑:Gap 现在在 safari 中受支持,因此您应该可以毫无问题地使用它。


以上是Safari的Flexbox间隙解决方法的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>