每行和每列角X项

Question

我已经试了两个小时了。我正试着在屏幕上显示一些按钮。你可以看到他们现在的样子。他们是很多，所以他们看不开，而我不能让他们看起来正确。我想有10个平均间距的按钮每行和20个每列。另外，我想要它包装小屏幕。我搜索了一下，但找不到解决问题的确切办法。我用angular-flex-layout试过了，但我做不到，所以我放弃了。我怎样才能以另一种方式做到这一点呢？也许用css？

​

​

 <mat-tab>
                    <ng-template mat-tab-label>
                        <mat-icon class="mr-8">format_list_numbered</mat-icon>
                        Cell Buttons
                    </ng-template>
                    <div fxLayout="row wrap" fxLayout.xs="column wrap" fxFlex.gt-xs="90%" [fxFlex.gt-md]="regularDistribution" fxLayoutAlign="space-evenly start">
                        <button mat-button class="fuse-white-fg" [class.green]="!prm.PackageCount" [class.red]="prm.PackageCount"
                            *ngFor="let prm of cell" [routerLink]="'/terminal/cell/'+prm.CellId">Package Count: {{prm.PackageCount}}
                        </button>
                    </div>
                </mat-tab>

Answer 1

事实上，flex的工作非常简单。试着这样做：

<style type="text/css">
  .wrap {
    display: flex;
    flex-wrap: wrap;
  }

  .button-place {
    padding: 5px;
  }

  button {
    flex: 0 0 10%;
  }
</style>

<div class="wrap">
  <div class="button-place" *ngFor="let prm of cell">
    <button mat-button class="fuse-white-fg" [class.green]="!prm.PackageCount" [class.red]="prm.PackageCount"  [routerLink]="'/terminal/cell/'+prm.CellId">Package Count: {{prm.PackageCount}}
    </button>
  </div>
</div>

如果您需要它作为一个小屏幕，那么使用@media：

@media (max-width: 800px) {
  button {
    flex: 0 0 20%;
  }
}

编辑:添加了带填充的包装

Answer 2

你可以使用CSS网格。尝试下面的CSS代码。

.container {
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 10 is the number of items per column */
  grid-template-rows: repeat(20, 1fr);  /* 20 is the number of items per row */
  gap: 15px; /* The gap between the row and columns */
}

@media (max-width: 500px) {
  .container {
    grid-template-columns: repeat(5, 1fr);
  }
}

您不必同时使用CSS属性grid-template-columns和grid-template-rows，您可以只使用所需的属性。