如何将 css flex 概念应用于角度材料

Question

我的导航抽屉CSS代码

:host{
    display: flex;
    background-color: #f0fff0;
    flex-grow:1;
}

.body-style{
    padding: 20px;
    min-height: 100px;
    flex-grow: 1;
}

HTML：

 <mat-drawer-container >
    <mat-drawer #drawer [mode]="over">I'm a drawer</mat-drawer>
    <mat-drawer-content>
            <button mat-raised-button (click)="drawer.toggle()">Toggle drawer</button>
        <div class="body-style"> 
            <router-outlet>

            </router-outlet>
        </div>
    </mat-drawer-content>
  </mat-drawer-container>

我显然在 Flexbox 概念中遗漏了一些东西。 <mat-drawer-content> 的宽度很小。

Answer 1

不要重新发明轮子。

Angular 团队已经通过Flex-Layout 满足了您的需求。

一旦安装，它会给出这个：

<mat-drawer-container >
  <mat-drawer #drawer [mode]="over">I'm a drawer</mat-drawer>
  <mat-drawer-content fxLayout="row" fxLayoutAlign="start center">
    <button mat-raised-button (click)="drawer.toggle()">Toggle drawer</button>
    <div class="body-style"> 
      <router-outlet></router-outlet>
    </div>
  </mat-drawer-content>
</mat-drawer-container>

不需要 CSS。