Flexbox gap workaround for Safari

Question

I finished my website but I didn't realize that safari doesn't support the flexbox gap. Is there a way around this without having the mess anything up? This is mostly for my media queries.

<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

Use the Lobotomized owl selector: .parent > * + * {} to add a margin-left that gives you space between the elements that come after another element, this way you eliminate the undesired margin it creates when you put the margin directly to the child's first element (.social-media img{})

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

Here you can read more about the Lobotomized Owl Selector

Edit: Gap is now supported in safari so you should be able to use it no problem.

Answer 2

Property gap with display: flex is not supported by Safar version < 14 https://caniuse.com/flexbox-gap . You might want to replace display flex with grid:

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

because grid's gap is supported in older Safari versions: https://caniuse.com/mdn-css_properties_gap_grid_context