调整大小后如何在元素列表项上垂直放置元素？

Question

试图列出一个列表，当调整大小时，文本元素将垂直放置在彼此的顶部，但是如右图所示，当调整窗口大小时，它们开始重叠。左图是全屏。

<mat-list-item *ngFor="let item of items">
  <div matLine>
    <div fxLayout="column">
      <div fxLayout="column" fxLayout.gt-md="row">
         <div fxFlex="50"> ---------one--------- </div>
         <div fxFlex="50"> ---------two--------- </div>
       </div>
       <div fxLayout="column" fxLayout.gt-md="row">
         <div fxFlex="50"> ---------three---------</div>
         <div fxFlex="50"> ---------four---------</div>
        </div>
      </div>
    </div>
  </mat-list-item>

Answer 1

mat-list-item具有由材料设计指定的固定高度。如果您需要更多空间，则应使用mat-list以外的其他内容，或分成多个列表项：

<ng-container *ngFor="let item of items">
    <div fxHide.lt-lg>
        <mat-list-item>
            <div matLine>
                <div fxLayout="column">
                    <div fxLayout="row">
                        <div fxFlex="50"> ---------one--------- </div>
                        <div fxFlex="50"> ---------two--------- </div>
                    </div>
                    <div fxLayout="row">
                        <div fxFlex="50"> ---------three---------</div>
                        <div fxFlex="50"> ---------four---------</div>
                    </div>
                </div>
            </div>
        </mat-list-item>
    </div>
    <div fxHide.gt-md>
        <mat-list-item>
            <div matLine>
                <div fxLayout="column">
                    <div fxFlex="50"> ---------one--------- </div>
                    <div fxFlex="50"> ---------two--------- </div>
                </div>
            </div>
        </mat-list-item>
        <mat-list-item>
            <div matLine>
                <div fxLayout="column">
                    <div fxFlex="50"> ---------three---------</div>
                    <div fxFlex="50"> ---------four---------</div>
                </div>
            </div>
        </mat-list-item>
    </div>
</ng-container>