css - Angular FlexLayout 在手机 View 中提供不同的宽度

Question

我正在使用 flex 布局在桌面 View 和手机 View 上垂直设置 Material 卡。

<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>

问题是，在手机 View 中，即使我将 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%。