Невозможно установить одинаковый размер для элементов flexbox

Question

Я пытаюсь отцентрировать и установить одинаковые размеры для 3 элементов flexbox. Align-items: stretch не работает.

.flex-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    height: 100vh;
}

.flex-items {
    cursor: pointer;
    margin-top: 40px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 40px;
    border-radius: 4px;
    padding: 15px;
    flex-grow:1;
}

<div class="flex-container">
  <div *ngFor="let module of modules">
    <mat-card class="flex-items" *ngxPermissionsOnly="module.permissionsRequired">
      <span routerLink={{module.routing}}>
        <mat-card-header>
          <mat-card-title>
            <h1>
                {{module.name}}
            </h1>
          </mat-card-title>
        </mat-card-header>
        <div class="mat-icon-card">
          <p style="text-align: center">
          <mat-icon>{{module.icon}}</mat-icon>
          </p>
        </div>
        <mat-card-content>
          <h3>
            <p style="margin: 10px auto;">
              {{module.description}}
            </p>
          </h3>
        </mat-card-content>
      </span>
    </mat-card>
  </div>
</div>

Answer 1

Будет работать следующее css: Вам придется заменить flex-grow на flex-base.Flex-grow позволяет элементу расти, но не имеет фиксированной ширины.

.flex-items {
    cursor: pointer;
    margin-top: 40px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 40px;
    border-radius: 4px;
    padding: 15px;
    flex-basis: 33.3333%;
}

У вас также есть div в вашем контейнере.Таким образом, атрибуты flex-box даже не применяются к дочерним элементам.Попробуйте изменить свой CSS так.

.flex-container > div {