Как центрировать элементы в «Flex Layout»?

Question

[kikosko]

подскажите как центрировать элементы что бы они были один под другим. использую Flex Layout
нужно что бы нижняя тройка была симметрично под верхними элементами

<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

[Dies Irae]

Используйте justify-content: center;

Или может justify-content: space-between;

Comments

[kikosko]

они у меня и так по центру, мне нужно что бы последние три были под верхними

[Dies Irae]

kikosko, я подумал что на картинке макет) Тогда justify-content: flex-start;

[kikosko]

Dies Irae, тогда весь блок с карточками не будет по центру, я пытаюсь отцентрировать блок но тогда нижние карточки не симметрично к верхним элементам, если justify-content: flex-start, то блок с карточками не по центру

[Dies Irae]

kikosko, ничего умнее не придумал) Костыль ужасный, но может натолкнет на правильную мысль. Как сделать только на CSS не знаю)

[kikosko]

Я добавил 3 пустых дива после цикла с шириной карточки, тоже ужасный костыль, но работает : )