时间戳

首页 > 解决方案 > 使用 flex 布局将一行图像分成两个相等的部分

angular - 使用 flex 布局将一行图像分成两个相等的部分

问题描述

我有 8 个徽标。我在打字稿文件中创建了一个界面和一个数组。图像显示在一行中。但我想把它们分成两个相等的部分。第一行将占用四行，第二行也将占用。所以，我必须使用 angular flex 布局。

[NB]：我使用了 fxLayout="row wrap"。但它在这个阵型中显示了 3 3 2。

HTML：

<div  
    fxLayout="row" 
    fxLayoutAlign="space-around center" 
    fxLayoutGap="1rem"
    >

      <ng-container *ngFor="let iconAttribute of iconAttributes">
        <div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="1rem">
          <img [src]="iconAttribute.imageAttribute" alt="iconAttribute.nameAttributre" width="120">
          <p>{{ iconAttribute.nameAttributre }}</p>
        </div>
      </ng-container>
      
    </div>
  </mat-card>

标签： angularangular-flex-layout

解决方案

<div fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="1rem">
<ng-container *ngFor="let iconAttribute of iconAttributes" fxFlex="50">

推荐阅读