Safari 的 Flexbox 间隙解决方法

Posted 2023-03-07

【中文标题】Safari 的 Flexbox 间隙解决方法

【英文标题】：Flexbox gap workaround for Safari

【发布时间】：2021-04-03 17:11:39

【问题描述】：

我完成了我的网站，但我没有意识到 safari 不支持 flexbox gap。有没有办法解决这个问题而不会弄得一团糟？这主要用于我的媒体查询。

<div class="social-media">
            <a  href="https://github.com/"><img class="social-media__icon" src="img/github.png" ></a>
            <a  href="https://www.linkedin.com/"><img class="social-media__icon" src="img/linkedin.png" ></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;
        
    

【参考方案1】：

使用 Lobotomized owl 选择器：.parent > * + * 添加一个margin-left，让您在另一个元素之后的元素之间留出空间，这样您就可以消除它在放置时创建的不需要的边距边距直接到子元素的第一个元素 (.social-media img)

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

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

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

【讨论】：

在 Safari 中，gap 和 column-gap 都不适合我。不过，这就像一个魅力。

【参考方案2】：

Safar 版本 https://caniuse.com/flexbox-gap 不支持 gap 和 display: flex 属性。 您可能想用grid 替换显示flex：

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

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

【参考方案3】：

我认为你可以制作一个 div 容器并将 justify-content: space-between;那么我认为它应该可以工作

【讨论】：

我应该把 div 放在哪里？我尝试了一些东西，但它不起作用

在需要间隙的项目周围放上div，然后放上display: flex;和 justify-content: space-between;在上面。如果是三个项目，则将每个项目的宽度设置为 30%，其余百分比将是两者之间的差距。