title: How to use ngFor to make cards remain in a row in Angular 6?
body: <p><code>ngFor</code> generated card stacked on each other instead of remain in a row.</p>
  
  <p>I am generating cards through <code>ngFor</code>. I am using <code>fxFlex="30"</code> for each card but they stacked on each other. I used <code>flex-wrap</code> also but didn't work.</p>
  
  <pre><code>&lt;div fxFlex *ngIf="designs" [@expand]&gt;
    &lt;div fxLayout="column" fxLayout.gt-sm="row" style="display: inline" *ngFor="let design of designs"&gt;
      &lt;div fxFlex="30"&gt;
        &lt;mat-card&gt;
          &lt;mat-card-header&gt;
            &lt;mat-card-title&gt;
              &lt;h2&gt;{{design.label}}&lt;/h2&gt;
            &lt;/mat-card-title&gt;
            &lt;mat-card-subtitle&gt;
              &lt;h3&gt;{{design.time}}hr&lt;/h3&gt;
            &lt;/mat-card-subtitle&gt;
          &lt;/mat-card-header&gt;
          &lt;img mat-card-image src="{{BaseURL + design.image}}"&gt;
          &lt;mat-card-content&gt;
            &lt;p&gt;{{design.description}}&lt;/p&gt;
          &lt;/mat-card-content&gt;
          &lt;mat-card-actions style="margin: auto;"&gt;
            &lt;button mat-stroked-button routerLink="/contact" color="primary"&gt;Book Now&lt;/button&gt;
          &lt;/mat-card-actions&gt;
        &lt;/mat-card&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want my generated cards should be in a row. But in actual they stacked on each other.</p>