角柔性布局网格系统

Question

点击查看原图

我想使屏幕像所附的图像一样，但是出现一些问题。我的代码在小型设备和大型设备上都可以正常运行，但在中型设备上则不能正常运行。因此，任何人都可以调查我的代码并帮助我解决此问题。实际上，我对Flex布局网格系统不感到困惑。在Bootstrap中实现此目标非常容易，但我希望在Flex Layout中实现相同的目标。

    <div fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutAlign.lg="start center"
     fxLayoutAlign.xs="center center" fxLayoutAlign.sm="center center">

  <div fxFlex="25%" fxFlex.md="50%" fxFlex.sm="100%" fxFlex.xs="100%" fxLayout.md="row"
       class="pading_card">
    <mat-card class="example-card">
      <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>Shiba Inu</mat-card-title>
        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
      </mat-card-header>
      <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
      <mat-card-content>
        <p>
          The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
          A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
          bred for hunting.
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
      </mat-card-actions>
    </mat-card>
  </div>

  <div fxFlex="25%" fxFlex.md="50%" fxFlex.sm="100%" fxFlex.xs="100%" class="pading_card">
    <mat-card class="example-card">
      <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>Shiba Inu</mat-card-title>
        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
      </mat-card-header>
      <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
      <mat-card-content>
        <p>
          The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
          A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
          bred for hunting.
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
      </mat-card-actions>
    </mat-card>
  </div>

  <div fxFlex="25%" fxFlex.md="50%" fxFlex.sm="100%" fxFlex.xs="100%" class="pading_card">
    <mat-card class="example-card">
      <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>Shiba Inu</mat-card-title>
        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
      </mat-card-header>
      <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
      <mat-card-content>
        <p>
          The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
          A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
          bred for hunting.
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
      </mat-card-actions>
    </mat-card>
  </div>

  <div fxFlex="25%" fxFlex.md="50%" fxFlex.sm="100%" fxFlex.xs="100%" class="pading_card">
    <mat-card class="example-card">
      <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>Shiba Inu</mat-card-title>
        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
      </mat-card-header>
      <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
      <mat-card-content>
        <p>
          The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
          A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
          bred for hunting.
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
      </mat-card-actions>
    </mat-card>
  </div>

</div>

Answer 1

<div fxLayout="row" fxLayout.lt-md="column"  fxLayoutGap="10px">
        <div fxLayout.gt-md="row" fxLayout.lt-sm="column"  fxLayoutGap="10px" fxFlex="100"  fxFlex.gt-md="50">
          <div fxFlex.lt-md="50" fxFlex.lt-sm="100" >1</div>
          <div fxFlex.lt-md="50" fxFlex.lt-sm="100" >2</div>
        </div>
        <div fxLayout.gt-md="row" fxLayout.lt-sm="column" fxLayoutGap="10px" fxFlex="100"   fxFlex.gt-md="50">
          <div fxFlex.lt-md="50" fxFlex.lt-sm="100" >3</div>
          <div fxFlex.lt-md="50" fxFlex.lt-sm="100" >4</div>
        </div>
      </div>