如何用我的图标来满足页面的宽度？

Question

我有一个包含以下代码的 html 页面：

<div class="container"
     fxLayout="row"
     fxLayout.sm="column"
     fxLayout.xs="column"
     fxLayoutAlign.gt-mat="space-around center"
     fxLayoutGap="10px"
     dir="rtl">

<div class="container"
fxLayout="column"
fxLayoutGap="10px"
dir="rtl">

  <div fxFlex>
    <div>
    <h3>در تمامی این بازار ها همراه شما هستیم</h3>
    <hr>
    </div>
  </div>

  <div fxFlex *ngIf="plans" [@expand]>
    <mat-grid-list cols="3" rowHeight="300px" >
    <mat-grid-tile *ngFor="let plan of plans" [routerLink]="['/plandetail', plan.id]" appHighlight>
      <img height="200px" src="{{BaseURL + plan.image}}" alt={{plan.name}}>
      <mat-grid-tile-footer>
        <h1 mat-line>{{plan.name | uppercase}}</h1>
      </mat-grid-tile-footer>
    </mat-grid-tile>
    </mat-grid-list>
  </div>
  <div [hidden]="plans || errMess">
    <mat-spinner></mat-spinner><h4>در حال بارگذاری ... </h4>
  </div>
  <div *ngIf="errMess">
    <h2>Error</h2>
    <h4>{{errMess}}</h4>
  </div>
</div>

看起来像这样：

但我喜欢横向展开来满足页面宽度。

Answer 1

试试这个，您需要将行更改为列，如下所示：

<div class="container"
     fxLayout="column"
     fxLayout.sm="column"
     fxLayout.xs="column"
     fxLayoutAlign.gt-mat="space-around center"
     fxLayoutGap="10px"
     dir="rtl">

<div class="container"
fxLayout="column"
fxLayoutGap="10px"
dir="rtl">

  <div fxFlex>
    <div>
    <h3>در تمامی این بازار ها همراه شما هستیم</h3>
    <hr>
    </div>
  </div>

  <div fxFlex *ngIf="plans" [@expand]>
    <mat-grid-list cols="3" rowHeight="300px" >
    <mat-grid-tile *ngFor="let plan of plans" [routerLink]="['/plandetail', plan.id]" appHighlight>
      <img height="200px" src="{{BaseURL + plan.image}}" alt={{plan.name}}>
      <mat-grid-tile-footer>
        <h1 mat-line>{{plan.name | uppercase}}</h1>
      </mat-grid-tile-footer>
    </mat-grid-tile>
    </mat-grid-list>
  </div>
  <div [hidden]="plans || errMess">
    <mat-spinner></mat-spinner><h4>در حال بارگذاری ... </h4>
  </div>
  <div *ngIf="errMess">
    <h2>Error</h2>
    <h4>{{errMess}}</h4>
  </div>
</div>

如何用我的图标来满足页面的宽度？

How to fulfill the width of the page with my icons?

html

expand

angular-material

angular-flex-layout

angular