Angular FlexLayout在手机视图中提供不同的宽度

Question

我正在使用flex布局在桌面视图上内嵌材料卡，在电话视图上垂直设置。

<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" class="containercards">
    <div fxFlex fxFlex.xs="100">
        <mat-card class="container">
            <mat-card-title>
                Jeu Puissance 4 </mat-card-title>
            <img mat-card-image src="../../assets/icons/puissance4.png">
            <mat-card-content>
                <p> Javascript, HTML/CSS </p>
            </mat-card-content>
            <mat-card-actions>
                <button mat-button (click)="Puissance4Href()">Github</button>
                <button mat-raised-button color="primary" (click)="openDialog('Puissance4')">Détails</button>
            </mat-card-actions>
        </mat-card>

    </div>
    <div fxFlex fxFlex.xs="100">
        <mat-card class="container">
            <mat-card-title>
                Post-it </mat-card-title>
            <img mat-card-image src="../../assets/icons/post-it.png">

            <mat-card-content>
                <p>Silex(PHP), HTML/CSS, AJAX </p>


            </mat-card-content>
            <mat-card-actions>
                <button mat-button (click)="PostitHref()">Github</button>
                <button mat-raised-button color="primary" (click)="openDialog('Postit')">Détails</button>
            </mat-card-actions>
        </mat-card>
    </div>
    <div fxFlex fxFlex.xs="100">
        <mat-card class="container">
            <mat-card-title>
                Gestionnaire de tâches </mat-card-title>
            <img mat-card-image src="../../assets/icons/planning.png">

            <mat-card-content>
                <p>Angular 4 , NodeJS , ExpressJS, Angular Material Components</p>


            </mat-card-content>
            <mat-card-actions>
                <button mat-button (click)="PlannerHref()">Github</button>
                <button mat-raised-button color="primary" (click)="openDialog('Gestionnaire')">Détails</button>
            </mat-card-actions>
        </mat-card>
    </div>

</div>

问题是在手机视图中，即使我将fxLayout.xs设置为100，我也不会获得具有相同宽度尺寸的卡片。

这是一个stackblitz的例子。

在这里，我得到第一个和第二个宽度较小的，在我的应用程序中只有第一张卡的宽度较小。

这是我在当地得到的

Answer 1

您的stackblitz不包含flex-layout作为依赖项（当然也不会导入FlexLayoutModule）。当您包含它时，将应用您添加的flex布局代码，并显示您的问题。

您正在尝试使用width="70%"应用于<mat-card>来设置所有卡片的宽度，但flex布局正在调整父级<div>的大小。并且因为你的fxLayoutAlign设置是"center center"，flex布局调整行布局的div的宽度，但不调整列布局的宽度。所以卡实际上是70％，但div不是。您需要将特定宽度应用于xs布局的div。您可能会发现添加xs特定布局对齐fxLayoutAlign.xs="start stretch"是您需要做的或至少是一个起点。这将使所有div全宽，使所有卡保持70％的一致性。