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）。当您包含它时，将应用您添加的灵活布局代码，并显示您的问题。

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

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

1 个答案: