title: Flexbox gap workaround for Safari
body: <p>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.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;social-media&quot;&gt;
    &lt;a href=&quot;https://github.com/&quot;&gt;
      &lt;img class=&quot;social-media__icon&quot; src=&quot;img/github.png&quot; alt=&quot;Github&quot;&gt;
    &lt;/a&gt;
    &lt;a href=&quot;https://www.linkedin.com/&quot;&gt;
      &lt;img class=&quot;social-media__icon&quot; src=&quot;img/linkedin.png&quot; alt=&quot;LinkedIn&quot;&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>.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;
      }
  }
  </code></pre>