时间戳

首页 > 解决方案 > 如何将 css flex 概念应用于角度材料

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

问题描述

我的导航抽屉的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>宽度很小。

标签： htmlangularcssflexboxangular-material

解决方案

不要重新发明轮子。

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。

推荐阅读