Как применить концепцию 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.