Angular 5 Material UI无布局相关CSS？如何实现布局定位？

Great question! I’ve faced this exact transition hurdle when moving from AngularJS Material to Angular Material 5—those built-in layout classes from the v1.x days are definitely missed at first, but there are solid, official ways to handle layouts without needing an external CSS framework.

1. 官方推荐：使用Angular Flex Layout #

Angular Material 5本身没有内置布局CSS，但Google官方配套了@angular/flex-layout库，专门用来和Angular Material配合实现响应式、Material Design风格的布局。它完全替代了AngularJS Material里的布局指令，而且功能更强大。

快速上手步骤： #

• 先安装依赖：

  npm install @angular/flex-layout @angular/cdk
  

• 在你的AppModule（或需要布局的子模块）中导入FlexLayoutModule：

  import { FlexLayoutModule } from '@angular/flex-layout';
  
  @NgModule({
    imports: [
      // ...其他模块导入
      FlexLayoutModule
    ]
  })
  export class AppModule { }
  

示例布局（侧边栏+顶部导航+主内容）： #

<div fxLayout="row" style="height: 100vh;">
  <!-- 侧边栏 -->
  <mat-sidenav mode="side" opened fxLayout="column" fxFlex="250px">
    <mat-nav-list>
      <a mat-list-item href="#">菜单1</a>
      <a mat-list-item href="#">菜单2</a>
    </mat-nav-list>
  </mat-sidenav>

  <!-- 主内容区域 -->
  <div fxLayout="column" fxFlex>
    <mat-toolbar color="primary">
      <span>我的应用</span>
    </mat-toolbar>
    <div fxFlex fxLayoutAlign="center center">
      <p>页面主内容</p>
    </div>
  </div>
</div>

这里的fxLayout、fxFlex、fxLayoutAlign和AngularJS Material里的layout、flex、layout-align逻辑几乎一致，上手成本很低。

2. 自定义CSS布局（Flexbox/Grid） #

如果不想额外引入库，直接用标准CSS的Flexbox或Grid布局也完全可行——Angular Material的组件都是基于标准HTML元素构建的，不会和自定义布局冲突。

示例：用CSS Grid实现相同布局 #

.layout-container {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 64px 1fr; /* 64px是mat-toolbar的默认高度 */
  height: 100vh;
}

.app-toolbar {
  grid-column: 1 / span 2; /* 横跨两列 */
}

对应的HTML：

<div class="layout-container">
  <mat-toolbar class="app-toolbar" color="primary">我的应用</mat-toolbar>
  <mat-sidenav mode="side" opened>侧边栏</mat-sidenav>
  <div>主内容</div>
</div>

3. 是否需要其他CSS框架？ #

完全没必要。Angular Flex Layout已经和Material Design的设计语言深度融合，能满足绝大多数布局需求；如果偏好手写CSS，标准Flexbox/Grid也足够灵活。

如果之前习惯了Bootstrap这类框架，虽然可以混用，但需要注意样式优先级冲突，建议尽量用Angular Material的主题系统（通过@angular/material的Sass变量）来统一全局样式，避免视觉不一致。

内容的提问来源于stack exchange，提问作者Ajaxe