Safari 的 Flexbox 间隙解决方法

Question

我完成了我的网站，但我没有意识到 safari 不支持 flexbox 间隙。有没有办法解决这个问题而不把事情搞砸？这主要用于我的媒体查询。

<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

我认为你可以制作一个 div 容器并放置 justify-content: space-between;然后我认为它应该工作

Answer 2

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

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

在这里您可以阅读更多关于 Lobotomized Owl Selector

编辑：Safari 现在支持 Gap，因此您应该可以毫无问题地使用它。

Answer 3

属性 gap with display: flex 不受 Safar 版本 < 14 https://caniuse.com/flexbox-gap 的支持。您可能希望将显示 flex 替换为 grid:

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

因为旧版 Safari 支持网格的间隙：https://caniuse.com/mdn-css_properties_gap_grid_context

Safari 的 Flexbox 间隙解决方法

Flexbox gap workaround for Safari

safari

flexbox