Почему div шире, чем его содержимое?

Question

Я пытаюсь создать страницу с макетом с гибкой заливкой 20-60-20, но div в центре, который должен составлять 60% страницы, шире, чем ее содержимое, поэтому его содержимое выглядит так, как будто вне центра.

home.component. html:

<div fxLayout="row wrap"  fxLayoutGap="20px grid">
  <div *ngFor="let data of DUMMY_DATA">
    <mat-card class="example-card" >
      <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
      <mat-card-content class="description-max-height">
        <p>
          {{data.description.length > 100 ? data.description.substring(0, 100) + '...' : data.description}}
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
      </mat-card-actions>
    </mat-card>
  </div>
</div>

home.component. css:

.example-card {
  width: 250px;
  height: 300px;
}

.description-max-height {
  max-height: 30px;
}

app.component. html:

<mat-toolbar color="primary" style="margin-bottom: 20px">
  <mat-toolbar-row>
    <span>Some title</span>
    <span class="toolbar-spacer"></span>
    <button mat-button color="accent" (click)="openLoginDialog()">Log In</button>
    <button mat-button color="accent" (click)="openSignupDialog()">Register</button>
  </mat-toolbar-row>
</mat-toolbar>
<div fxLayout="row">
  <div fxFlex="20"></div>
  <router-outlet fxFlex="60"></router-outlet>
  <div fxFlex="20"></div>
</div>

app.compoenent. css:

.toolbar-spacer {
  flex: 1 1 auto;
}

Как я могу реализовать это, чтобы будет отображать home.component. html в центре страницы, но при этом он не будет шире, чем его контекст?

Вы можете найти пример Stackblitz здесь

Answer 1

router-outlet не является контейнером. Все содержимое, направленное на router-outlet, отображается как родственный узел, а не как дочерний узел розетки. Таким образом, вы должны обернуть router-outlet с шириной 60% div.

Stackblitz demo

<div fxLayout="row">
  <div fxFlex="20"></div>
  <div fxFlex="60">
    <router-outlet></router-outlet>
  </div>
  <div fxFlex="20"></div>
</div>

Answer 2

Добавление fxLayoutAlign="centre" к fxLayout div (div верхнего уровня) в home-component.html должно выровнять элементы / карты по центру в контейнере.

<div fxLayout="row wrap"  fxLayoutGap="20px grid" fxLayoutAlign="center">