针对Safari的Flexbox gap解决方法

Question

我完成了我的网站，但我没有意识到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;
        }
    }

Answer 1

使用的左边界owl选择器：.parent > * + * {}添加一个-left，以便在另一个元素后面的元素之间留出空间，这样就消除了在将边距直接放入子元素的第一个元素(.social-media img{})时所创建的不需要的边距。

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

在这里，您可以阅读有关Lobotomized Owl Selector的更多信息

编辑: safari现在支持Gap，所以你使用它应该没问题。

Answer 2

Safar版本低于14的https://caniuse.com/flexbox-gap不支持带有display: flex的属性gap。您可能希望用grid替换display flex

display: grid;
grid-gap: 8rem; /* Safari 10-11 */
gap: 8rem;      /* Safari 12+ */

因为grid的gap在旧的Safari版本中被支持：https://caniuse.com/mdn-css_properties_gap_grid_context

Answer 3

我认为您可以创建一个div容器，并将justify-content:空格放在其间；然后我认为它应该可以工作