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

使用 Lobotomized 猫头鹰选择器：

.parent > * + * {}

添加一个左边距，为另一个元素后面的元素之间提供空间，这样就可以消除当您将边距直接放置到子元素的第一个元素时所创建的不需要的边距元素 (

.social-media img{}

)

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

在这里您可以阅读有关脑叶切除猫头鹰选择器

的更多信息

编辑：Safari 14.1（2021 年 9 月）现已支持 Gap，因此您应该能够毫无问题地使用它。

Answer 2

Safar 版本不支持

gap

 和 

display: flex

 属性 

https://caniuse.com/flexbox-gap< 14 。 您可能想将显示 flex

 替换为 

grid

：

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

因为旧版 Safari 版本支持网格间隙：

https://caniuse.com/mdn-css_properties_gap_grid_context

Answer 3

接受的答案存在问题，如果只有一行，则第一个元素的边距错误。而且居中的元素总是离右边太远 8rem。

更好的解决方案，始终适用于正确的间距：

.container {
  display: flex;
  // the trick is to set margins around boxes, but correct the margins around elements that are situated at the border of the container with negative margins
  margin: 0 -10px -20px -10px;
}

.box {
  min-width: 100px;
  height: 100px;
  background-color: deeppink;
  margin: 0 10px 20px 10px;
}

<div class='container'>
  <div class='box'>1</div>
  <div class='box'>2</div>
  <div class='box'>3</div>
  <div class='box'>4</div>
</div>

Answer 4

您可以删除间隙类并向子元素添加另一个间隙类

<div class="d-flex"> // it was "d-flex gap" previously
  <div class="mx-2">
    //content
  </div>
  <div class="mx-2">
    //content
  </div>
</div>

Answer 5

受到 KCarnaille 和 Elazar Zadiki 对建议使用脑叶切除猫头鹰选择器的答案的评论的启发，我相信以下 CSS 规则可以更好地作为使用

column-gap

 和 

row-gap

 属性以及 Flexbox 的后备：

.flex-container {
  --column-gap: 5px; 
  --row-gap: 10px;
  display: flex;
  flex-wrap: wrap;
  /* Remove the margin created by the last row of flex items */
  margin-bottom: calc(-1 * var(--column-gap));
  /* Remove the margin created by the last flex item in each row */
  margin-right: calc(-1 * var(--row-gap));
}
.flex-container > .flex-item {
  margin-bottom: var(--row-gap);
  margin-right: var(--column-gap);
}

当然，如果您要使用

gap

 属性，请为上面的 

--column-gap

 和 

--row-gap

 设置相同的值。

Answer 6

我认为你可以制作一个 div 容器并放置 justify-content: space- Between;那么我认为它应该有效