时间戳

首页 > 解决方案 > Angular：如何强制元素进入新行？

html - Angular：如何强制元素进入新行？

问题描述

我有一个组件的 HTML 页面，我想使用 fxLayout 强制数组中的元素进入新行。
例如，我有一个包含 11 个元素的列表，我想在第一行有 5 个元素，在第二行有 5 个元素，然后在第三行有最后一个元素。

编辑：不应确定每行的元素数，以便它可以根据屏幕大小而改变。现在我可以每行有一定数量的元素，但它不会改变，除非屏幕非常小。

我怎样才能做到这一点？
那是我的代码：

<div class="boards" fxFlexWrap="wrap" fxLayoutGap="1em" fxLayout="row">
  <mat-card fxFlex fxLayoutAlign="center" *ngFor="let board of boards | async">
    {{board.name}}
  </mat-card>
</div>

解决了

标签： htmlangularlayout

解决方案

您可以fxLayout="row wrap"在弹性容器上设置并fxFlex="20%"在弹性项目（子元素）上设置

<div fxLayout="row wrap">
  <div fxFlex="20%" *ngFor="let item of items">
    {{item}}
  </div>
</div>

由于您正在设置弹性间隙，因此您还应该考虑弹性项目的宽度。

<div fxLayout="row wrap" fxLayoutGap="1em">
  <div fxFlex="0 0 calc(20% - 1em)" *ngFor="let item of items">
    {{item}}
  </div>
</div>

如果你想消除每行末尾的空白，你需要一点 css 技巧

<div class="boards" fxLayout="row wrap" fxLayoutGap="1em">
  <div fxFlex="0 0 calc(20% - 0.8em)" *ngFor="let item of items">
    {{item}}
  </div>
</div>

和

.boards :nth-child(5n){
  margin-right: 0 !important;
}

这是一个工作演示https://stackblitz.com/edit/angular-unxtaq

推荐阅读