title: Angular 2 material and flex-layout alignment
body: <p>I am trying to use angular 2 material and flex-layout to create a responsive gallery of elements. After hours and hours, I still can't have my elements centered: <a href="https://i.stack.imgur.com/Hsicy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Hsicy.png" alt="centered"></a></p>
  
  <p>This is the source code:</p>
  
  <pre><code>&lt;div fxLayout='row' fxLayoutWrap fxLayoutGap="2rem"&gt;
    &lt;md-card fxFlex.gt-md="20" fxFlex.md="28"  fxFlex.sm="40" fxFlex.xs="100" *ngFor="let recipe of recipes" [routerLink]="['/details', recipe.id]" class="recipe-card"&gt;
      &lt;md-card-header&gt;
        &lt;md-card-title&gt;element&lt;/md-card-title&gt;
      &lt;/md-card-header&gt;
      &lt;img md-card-image src="http://placehold.it/350x200"&gt;
      &lt;md-card-content&gt;
        &lt;p&gt;
          Lorem Ipsum
        &lt;/p&gt;
      &lt;/md-card-content&gt;
    &lt;/md-card&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried different values for <code>fxFlexAlign</code> (<a href="https://github.com/angular/flex-layout/wiki/API-Documentation" rel="noreferrer">https://github.com/angular/flex-layout/wiki/API-Documentation</a>) but none of them achieves what I need, that is, having the elements centered or, in other words, distribute the red square space between the right and the left side.</p>
  
  <p>Is there a way of achieving this? </p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Unfortunately, <code>justify-content: space-between;</code> doesn't work if I have a dynamic number of items. Eventually, they will be wrapped in a new line, and then the item in the last row won't look as expected:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display:flex;
    width:100%;
    flex-flow:row wrap;
    justify-content: space-between;
  
    
  }
  .block {
    width:100px;
    height:100px;
    border:1px solid red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem"&gt;
     ... you content
    &lt;/div&gt;
    &lt;div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem"&gt;
     ... you content
    &lt;/div&gt;
    &lt;div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem"&gt;
     ... you content
    &lt;/div&gt;
    &lt;div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem"&gt;
     ... you content
    &lt;/div&gt;
    &lt;div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem"&gt;
     ... you content
    &lt;/div&gt;
    &lt;div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem"&gt;
     ... you content
    &lt;/div&gt;
    &lt;div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem"&gt;
     ... you content
    &lt;/div&gt;
    &lt;div class="block" fxLayout='row' fxLayoutWrap fxLayoutGap="2rem"&gt;
     ... you content
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>