title: using ng-repeat with google materials flex box (with wrap?)
body: <p>I am trying to create a 2 by 2 grid iterating with <code>ng-repeat</code> and using the flex box. I have seen some examples where <code>flex-wrap:wrap</code> attribute would produce the effect I want, but I haven't been able to get the flex-widths to work correctly. </p>
  
  <p>The following is the mark down I have, with screenshots for wide, and mobile view, respectively. I am trying to get the wide view to render a 2x2 box.</p>
  
  <pre><code>&lt;div layout="row"  layout-xs="column"&gt;
  
  &lt;div layout="row"  layout-xs="row" flex-sm="25"   flex-gt-sm="50"  ng-repeat="sellingPoints in detailCtrl.sellingPointsMenu"   class="selling-points-wrapper"&gt;
      &lt;div class="selling-points-picture"&gt;
      &lt;md-icon md-svg-icon="{{ sellingPoints.icon }}" aria-label="Expand"&gt;&lt;/md-icon&gt;
      &lt;div class="selling-points-text"&gt;{{ sellingPoints.title }}&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><a href="https://imgur.com/Ceov0U6" rel="nofollow noreferrer">https://imgur.com/Ceov0U6</a> -- wide-view
  <a href="https://imgur.com/tuuBe0D" rel="nofollow noreferrer">https://imgur.com/tuuBe0D</a> -- mobile-view        </p>