每行和每列的 Angular X 项答案

【问题标题】：Angular X items per row and column每行和每列的 Angular X 项
【发布时间】：2021-07-28 12:38:15
【问题描述】：

我已经尝试了 2 个小时来完成这项工作。我正在尝试在屏幕上显示一些按钮。您可以在下面看到它们目前的样子。它们很多，所以它们看起来不太好，我无法让它们看起来正确。我希望每行有 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>

【问题讨论】：

标签： javascript html css angular typescript

【解决方案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%;
  }
}

编辑：添加了一个带填充的包装

【讨论】：

现在它只有 1 行 :-(
抱歉，我为“.wrap”复制了错误的样式。现在一切正常
好的，谢谢你现在它是正确的，但是按钮之间没有任何空间。我应该为此添加什么？
包装你的按钮
元素，并为他设置样式填充：
将填充添加到主消息

【解决方案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，您可以只使用您需要的一个。

【讨论】：