title: Equal distance between Div's using Angular 5 and Flex Layout
body: <p>I am currently using Angular 5 that runs a loop and displays several containers as a list (Thousands of results).</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="temp-list"&gt;
        &lt;div&gt;
              &lt;ng-container #activityCards *ngFor="let activity of (activityCollection.activities | filters: filtersObject); let i = index;"&gt;
                  &lt;div class="activity-card-container" *ngIf="checkIsVisible(i)" [ngClass.gt-md]="{'display-inline': true, 'large-activity': i &lt; 3, 'medium-activity': i &gt; 2 &amp;&amp; i &lt; 7, 'small-activity': i &gt; 6 }" &gt;
                      &lt;activity-card [activity]="activity"&gt;&lt;/activity-card&gt;
                  &lt;/div&gt;
              &lt;/ng-container&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>You can also see that I am using a Flex Layout ngClass that adds a class to the container based on the index of the element. The first three containers are large(33.33%), the next 4 are medium(25%), and the rest are small(20%). 
  I would like 24px of space between each element, however; I only want that space between containers, not at the left or right ends. </p>
  
  <p><a href="https://i.stack.imgur.com/8lRA1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8lRA1.jpg" alt="enter image description here"></a>
  <br/><br/>
  Here is the CSS I currently have.</p>
  
  <pre><code>.temp-list {
      font-size: 0;
  }
  .activity-card-container {
      position: relative;
      box-sizing: border-box;
  }
  .display-inline {
      display: inline-block;
      padding: 0 24px 24px 0;
  }
  .large-activity {
      width: 33.333%;
  }
  .large-activity:nth-child(3) {
      padding-right: 0;
  }
  .medium-activity {
      width: 25%;
  }
  .medium-activity:nth-child(7) {
      padding-right: 0;
  }
  .small-activity {
      width: 20%;
  }
  .small-activity:nth-child(5n + 12) {
      padding-right: 0;
  }
  </code></pre>
  
  <p>As you can see I added 24px of padding to the right and bottom of each container. I then select the last element of each row and disregard the padding. The problem with this solution is that the last element is always 24px wider than the previous containers. I need them all to the same width. Any thoughts? </p>