How to center elements in "Flex Layout"?

Question

Layout

tell me how to center the elements so that they are one under the other. using Flex Layout
I need the bottom three to be symmetrical under the top elements

<div fxLayout="row wrap"
     fxLayoutGap="30px"
     fxLayoutAlign="center start">
    <mat-card class="card" *ngFor="let pic of collection;">
        <mat-card-content>
         // other code //

.card {
    max-width: 210px;
    margin-bottom: 10px;
}

Answer 1

Use justify-content: center;
Or maybe justify-content: space-between;