css - How to avoid Horizontal scroll bar while using FlexLayoutModule in angular

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>

I am new to flexlayoutmodule in angular,I was trying to loop some card contents like products in a e-cart website. but when more than 3 cards a horizontal scroll bar is coming, My requirement is ,it should display cards in each row, once its filled a row it should be moved to another row.

Thanks in advance :)

标签： cssangularangular-flex-layout

Answer 1

css flex 行不会包装组件，您可能需要将 wrap 与行一起使用。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>