Angular FlexLayout giving different widths in phone view - css

Question

I'm using flex layout to set material card inline on desktop view and vertically on phone view .
<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>
The problem is that in phone view, I don't get cards with the same width size even if I set fxLayout.xs to 100.
Here's a stackblitz example.
Here I get the first and second with a smaller width, in my app only the first card have a smaller width.
Here's what I get in local

Answer 1

Your stackblitz doesn't include flex-layout as a dependency (and of course doesn't import FlexLayoutModule). When you include it, the flex layout code you've added will be applied and your problem will show.
You are trying to set the width of all your cards using width="70%" applied to <mat-card> but flex layout is adjusting the size of the parent <div>. And because your fxLayoutAlign setting is "center center", flex layout adjusts the widths of the divs for the row layout but not for the column layout. So the cards are actually 70%, but the divs are not. You need to apply a specific width to the divs for xs layouts. You might find that adding the xs specific layout alignment fxLayoutAlign.xs="start stretch" is all you need to do or at least a starting point. This will make all the divs full width, leaving all the cards at a consistent 70%.