在 angular 中使用 FlexLayoutModule 时如何避免出现水平滚动条

Question

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-property-feed',
  templateUrl: './property-feed.component.html',
  styleUrls: ['./property-feed.component.scss']
})
export class PropertyFeedComponent implements OnInit {

  property =[1,2,3,4,5,6,7,8,9,10];
  
 
  constructor() { }

  ngOnInit() {
  }

}

button {
  margin: 5px 5px 5px 5px;
}
.feed-title {
  font-size: 30px;
  font-family: "Girassol", cursive;
}

.property-feed {
  width: 300px;
  height: 410px;

}
.row-class{
  overflow:;
}

<div class="row-class" fxLayout="row" >
    <ng-container *ngFor="let ppty of property">
        <div fxFlex>
            <mat-card class="property-feed">

                <mat-card-header>
                    <div mat-card-avatar class="avatarImage"></div>
                    <mat-card-title>Card Title</mat-card-title>
                    <mat-card-subtitle>Card Subtitle</mat-card-subtitle>
                </mat-card-header>
                <mat-card-content>
                    <app-gallery></app-gallery>
                    <h3>some informaion to the end user</h3>
                </mat-card-content>
                <mat-card-footer>

                </mat-card-footer>
                <mat-card-actions>
                    <button matTooltip="If intrested contact seller" mat-fab large color="primary">
                        <mat-icon>thumb_up_alt</mat-icon>
                    </button>


                    <button matTooltip="If intrested add to wishlist" mat-fab large color="warn">
                        <mat-icon>add_shopping_cart</mat-icon>
                    </button>
                    <button matTooltip="View details" mat-fab large color="warn">
                        <mat-icon>unfold_more</mat-icon>
                    </button>
                </mat-card-actions>
            </mat-card>
        </div>

    </ng-container>

</div>

我是 angular 的 flexlayoutmodule 新手，我试图循环一些卡片内容，例如电子购物车网站中的产品。但是当超过 3 张卡片时，就会出现水平滚动条，我的要求是，它应该在每一行显示卡片，一旦它填充了一行就应该移动到另一行。

提前致谢:)

Answer 1

css flex 行不会换行组件，您可能需要与行一起使用换行。 https://github.com/angular/flex-layout/wiki/fxLayout-API

<div fxLayout="row wrap">
  <div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>

在 angular 中使用 FlexLayoutModule 时如何避免出现水平滚动条

How to avoid Horizontal scroll bar while using FlexLayoutModule in angular

css

angular

angular-flex-layout