在<mat>中自动排列<mat item>对象

Question

示例代码：

<div>
    <mat-list fxLayout="row" dense>
        <mat-list-item *ngFor="let label of labelsList"> <!-- just an array of strings -->
            <button mat-button>
                <mat-icon>cloud</mat-icon>
                {{label}}
            </button>
        </mat-list-item>
    </mat-list>
</div>

结果：

​

当我调整浏览器窗口大小时：

​

我需要的：的按钮，没有“空间”，只是去下一行。

我怎样才能做到这一点？我尝试了几种CSS类、属性等的组合。什么都没用。

稍后编辑:下面是一个完整的可复制示例：https://angular-svt72k.stackblitz.io

Answer 1

默认情况下，mat-list-item使用其容器的全部宽度并将每个项设置为display: block。要推翻这一点，您需要覆盖<mat-list>附带的默认角度(材质)样式。

将.mat-list-test设置为display: flex并添加flex-flow: row wrap将使其在空间不足时转到下一行。接下来，正如所说的，.mat-list-item样式采用的是全宽度。您可以通过设置display: initial和width: auto来覆盖它。阅读更多的关于MDN中的挠曲盒。

CSS

.mat-list-test {
  display: flex;
  flex-flow: row wrap;
}

.mat-list-base .mat-list-item.mat-list-item-test {
  display: initial;
  width: auto;
}

​

​

查看此StackBlitz上的实例以显示结果。