Wer das Property gap für Flex Elemente nutzt (oder genutzt hat) und den Internet Explorer 11 noch unterstützen muss, kann mit folgenden SCSS Mixins einfach das gleiche Verhalten erzeugen.

@mixin ie11gapfixrow($gap) {
  & > * { margin-right:#{$gap}; &:last-child { margin-right:0; } }
}
@mixin ie11gapfixcolumn($gap) {
  & > * { margin-bottom:#{$gap}; &:last-child { margin-bottom:0; } }
}

Angewendet wird es dann einfach innrehalb SCSS Anweisungen

#catnav { display:flex; justify-content:flex-start; /*gap:1rem;*/ 
  @include ie11gapfixrow(1rem);
}