fxFlex 响应式示例

什么是 fxLayout 和 fxFlex？

fxLayout 和 fxFlex 是 Angular Material 中用于进行响应式布局的指令集，它们可以让我们方便地在不同设备上自适应布局。

• fxLayout：用于设置容器的布局方式，例如 row、column、row-reverse、column-reverse 等等。
• fxFlex：用于设置容器内部元素所占比例，它分为两种，一种是设置固定宽度，另一种是设置比例（比例会在不同屏幕尺寸下自适应）。

示例

假设我们需要在不同设备上，展示一个左侧菜单和一个右侧内容区域，左侧菜单占据 20% 的宽度，右侧内容区域占据 80% 的宽度。并且在小屏幕设备上，左侧菜单显示为抽屉式菜单，通过点击菜单按钮进行显示与隐藏。

首先可以定义一个容器元素，设置它的布局方式和高度：

<div fxLayout="row" fxLayout.gt-xs="column" style="height: 100vh;">
</div>

接着，在容器中定义左侧菜单和右侧内容区域，使用 fxFlex 指令设置它们所占比例：

<div fxLayout="row" fxLayout.gt-xs="column" style="height: 100vh;">
  <!-- 左侧菜单 -->
  <div fxFlex.gt-xs="20" fxLayout="column" fxLayoutAlign="start stretch" style="background-color: #eee;">
    <a href="#">菜单项 1</a>
    <a href="#">菜单项 2</a>
    <a href="#">菜单项 3</a>
  </div>
  <!-- 右侧内容区域 -->
  <div fxFlex="80" style="background-color: #ddd;">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, recusandae delectus harum beatae sapiente qui libero, possimus at ex minus quae. Cumque nam nostrum quibusdam. Explicabo labore excepturi perspiciatis ea.</p>
  </div>
</div>

最后，使用 Angular Material 中提供的侧滑菜单组件 MatSidenav，对左侧菜单进行抽屉式设计：

<mat-sidenav-container style="height: 100vh;">
  <mat-sidenav #sidenav mode="side" [opened]="!(isHandset$ | async)" [closed]="(isHandset$ | async)">
    <a href="#">菜单项 1</a>
    <a href="#">菜单项 2</a>
    <a href="#">菜单项 3</a>
  </mat-sidenav>
  <mat-sidenav-content>
    <div fxLayout="row" [fxLayout.gt-xs]="'column'">
      <!-- 菜单按钮 -->
      <button mat-icon-button (click)="sidenav.toggle()" class="menu-button" [style.display]="isHandset$ | async ? 'flex' : 'none'">
        <mat-icon>menu</mat-icon>
      </button>
      <!-- 内容区域 -->
      <div fxFlex style="background-color: #ddd;">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, recusandae delectus harum beatae sapiente qui libero, possimus at ex minus quae. Cumque nam nostrum quibusdam. Explicabo labore excepturi perspiciatis ea.</p>
      </div>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

总结

通过使用 fxLayout 和 fxFlex 指令，我们可以轻松实现响应式布局，让我们的应用在不同设备上都能有良好的展示效果。