每行最多 4 列 Angular Material 2 FlexLayout答案

【问题标题】：4 Column maximum per row Angular Material 2 FlexLayout每行最多 4 列 Angular Material 2 FlexLayout
【发布时间】：2018-09-04 10:13:06
【问题描述】：

我在使用 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>

非常感谢！

【问题讨论】：

我刚刚添加了 fxLayout="row wrap" 并且效果很好:)

标签： angular-material angular-flex-layout

【解决方案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>

【讨论】：