Flex Gap Polyfill

component.html

<div class="container">
  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
  </div>
</div>

<div class="container" dir="rtl">
  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
  </div>
</div>

flex-gap-mixin.scss

@mixin flex-gap($row-gap, $column-gap: $row-gap) {
  display: flex;
  & > * {
    display: flex;
    flex-wrap: wrap;
    margin-top: -$column-gap;
  }

  & > * > * {
    display: flex;
    margin-top: $column-gap;
  }

  &:not([dir="rtl"]) {
    & > * {
      margin-left: -$row-gap;
    }
    & > * > * {
      margin-left: $row-gap;
    }
  }

  &[dir="rtl"] {
    & > * {
      margin-right: -$row-gap;
    }
    & > * > * {
      margin-right: $row-gap;
    }
  }
}

style.scss

.container {
  @include flex-gap(10px);
  // justify-content: center;   
}

.parent {
  // justify-content: center;
}

.child {  
  // width: 50px;
  // heigth: 50px;
}

Plnkr Example