每行最多4列角材料2 FlexLayout

Question

我在Angular Material 2和flexLayout上遇到问题，我不明白：如何在4列之后开始新的一行？

我想要这样的东西：

现在，我使用切片管来获取第一行（一个按钮，三个项目），但是在执行其他行时遇到问题。

当我有4列时，我想开始新的一行。我该如何实现？

这里的代码：

<div fxFlexFill>
                        <div fxFlexFill fxLayout="row" fxLayoutWrap fxLayout.xs="column" fxLayout.sm="column" fxLayoutGap="20px grid">
                            <div fxFlex="25">
                                <div fxFlexFill fxLayoutAlign="center center">
                                    <mat-card (click)="addAdvert()" class="mat-card-add">
                                        <div fxLayout="row" fxLayoutAlign="center center" fxFlex="100%">
                                            <span style="font-size:32px;text-align:center">+<br />Ajouter une publicité</span>
                                        </div>
                                    </mat-card>
                                </div>
                            </div>
                            <div fxFlex="25" *ngFor="let product of products | slice:0:3">
                                <div style="border:1px solid #ccc" fxFlexFill fxLayoutAlign="center center">
                                    <mat-card>
                                        <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
                                        <mat-card-title>{{product.designation}}</mat-card-title>
                                        <mat-card-content>
                                            <p>
                                                {{product.description}}
                                            </p>
                                        </mat-card-content>
                                        <mat-divider [inset]="true"></mat-divider>
                                        <mat-card-actions align="end">
                                            <button mat-button>LIKE</button>
                                            <button mat-button>SHARE</button>
                                        </mat-card-actions>
        
                                    </mat-card>
                                </div>
                            </div>
                        </div>
                        <div fxFlexFill fxLayout="row" fxLayoutWrap fxLayout.xs="column" fxLayout.sm="column" fxLayoutGap="20px grid">
                            <div fxFlex="25" *ngFor="let product of products | slice:3; let i = index">
                                <div style="border:1px solid #ccc" fxFlexFill fxLayoutAlign="center center">
                                    <mat-card>
                                        <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
                                        <mat-card-title>{{product.designation}}</mat-card-title>
                                        <mat-card-content>
                                            <p>
                                                {{product.description}}
                                            </p>
                                        </mat-card-content>
                                        <mat-divider [inset]="true"></mat-divider>
                                        <mat-card-actions align="end">
                                            <button mat-button>LIKE</button>
                                            <button mat-button>SHARE</button>
                                        </mat-card-actions>
        
                                    </mat-card>
                                </div>
                            </div>
                        </div>
                    </div>

非常感谢您！

Answer 1

如果您将Angular 7+ Material与步进器一起使用，并且需要在同一行中使用上一个和下一个按钮，但是一个按钮从左侧开始，另一个按钮从右侧开始。使用下面的代码。

<div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5%"
                         fxLayoutAlign="center">
                        <div fxFlex=50%">
                            <div fxLayout="row" fxLayoutAlign="start none">
                                <button mat-raised-button type="button" fxFlexAlign="start none" color="primary"
                                        matStepperPrevious>
                                    Previous
                                </button>
                            </div>
                        </div>
                        <div fxFlex="50%">
                            <div fxLayout="row" fxLayoutAlign="end end">
                                <button mat-raised-button type="button" fxFlexAlign="end end" color="accent"
                                        matStepperNext [disabled]="frmStepTwo.invalid">
                                    Next
                                </button>
                            </div>
                        </div>
                    </div>