显示材质角卡css答案

【问题标题】：Display material angular cards css显示材质角卡css
【发布时间】：2018-07-20 21:59:35
【问题描述】：

我使用 angular cli 6 和 angular material 2。

我想将卡片的数量限制为每行 8 个大号、4 个中号和 1 个小号，但我不知道如何使用这个 css。这是我的模板。

有很多例子，但我不明白好......

你也知道css和角度材料2的好教程吗。非常感谢？

//html

<div class="grid">
<ng-container  *ngFor="let referentielToDisplay  of referentielsToDisplay | async" >

  <mat-card *ngIf="toppings.value.includes(referentielToDisplay.speSS)">
        <mat-card-title-group>
          <img mat-card-image    src="{{ referentielToDisplay?.url }}" alt="SNFGEu" >
          <mat-card-title><h5>{{ referentielToDisplay?.nomSS }}</h5></mat-card-title>
          <mat-card-subtitle *ngIf="referentielToDisplay?.nomSS2">{{ referentielToDisplay?.nomSS2 }}</mat-card-subtitle>
        </mat-card-title-group>
        <mat-card-content>
          <p>{{ referentielToDisplay?.descriptionSS }}</p>
        </mat-card-content>
        <mat-card-actions>
     <a target="_blank" href="{{ referentielToDisplay?.webSS }}">Accès web</a>
        </mat-card-actions>
      </mat-card>

</ng-container>
</div>

//CSS

.grid {
     display: flex;
    }

    mat-card {
      width: 400px;
      margin: 15px;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
    }

    @media only screen and (max-width: 768px) {
      mat-card {
        margin: 15px 0 !important;
      }
    }
    mat-card:hover {
      box-shadow: 3px 3px 16px -2px rgba(0, 0, 0, .5);
    }
    mat-card-title {
      margin-right: 5px;

    }
    mat-card-title-group {
      margin: 0;
    }

    img {
   width:70px;
   height :70px;

    margin-left: 5px;
    }

    span {
      display: inline-block;
      font-size: 13px;
    }

【问题讨论】：

我想让你检查一下：[angular material grid system](stackoverflow.com/questions/45337959/…) on stackoverflow question。
你可以使用引导程序吗？使用最新版本的 flex 模型将是一件轻而易举的事。
你能给我举个例子吗？我知道 bootstrap，但我想测试 angular flex 布局

标签： css angular angular-material2

【解决方案1】：

为了避免不一致，您可以使用使用 boostrap 4 或 Angular Flex Layout 的网格系统。

【讨论】：

我必须在哪里编写 ngfor 和 ngif 条件才能获得正确的网格？

【解决方案2】：

最后，我使用了引导程序：

<div  class="row no-gutter">
  <ng-container *ngFor="let referentielToDisplay  of referentielsToDisplay | async">
      <ng-container  *ngIf="toppings.value.includes(referentielToDisplay.speSS)">
  <div class="col"  >
  <mat-card>
        <mat-card-title-group>
          <img mat-card-image    src="{{ referentielToDisplay?.url }}" alt="SNFGEu" >
          <mat-card-title><h5>{{ referentielToDisplay?.nomSS }}</h5></mat-card-title>
          <mat-card-subtitle *ngIf="referentielToDisplay?.nomSS2">{{ referentielToDisplay?.nomSS2 }}</mat-card-subtitle>
        </mat-card-title-group>
        <mat-card-content>
          <p>{{ referentielToDisplay?.descriptionSS }}</p>
        </mat-card-content>
        <mat-card-actions>
     <a target="_blank" href="{{ referentielToDisplay?.webSS }}">Accès web</a>
        </mat-card-actions>
      </mat-card>
      </div>
    </ng-container> 
       </ng-container>

</div>

【讨论】：