Angular 5中mat-toolbar内FlexLayout布局异常求助

我来帮你搞定这个布局问题！先看了你的代码和模块配置，模块部分是没问题的——FlexLayoutModule已经正确导入了，问题主要出在模板的布局写法上。

问题分析 #

你在mat-toolbar里套了一层div来用FlexLayout，但mat-toolbar本身默认就是flex容器，额外嵌套div反而可能引发样式冲突；另外，你没设置元素的对齐方式，再加上<h1>默认的margin，会导致布局偏移，达不到四个元素各占25%且整齐排列的效果。

修正后的模板代码 #

<mat-toolbar color="primary" fxLayout="row" fxLayoutAlign="center center">
  <button mat-raised-button color="primary" fxFlex="25">
    <b>Home</b>
  </button>
  <button mat-button fxFlex="25">
    <mat-icon svgIcon="navigation:ic_menu_24px"></mat-icon>
  </button>
  <h1 fxFlex="25" style="margin: 0;">Dashboard</h1>
  <button mat-raised-button color="primary" fxFlex="25">
    <b>Add App</b>
  </button>
</mat-toolbar>

关键修改点说明 #

• 直接在mat-toolbar上应用Flex指令：去掉多余的嵌套div，利用mat-toolbar本身的flex容器特性，简化结构同时避免样式冲突
• 添加fxLayoutAlign="center center"：让所有子元素在垂直和水平方向都居中对齐，解决按钮与标题上下错位的问题
• 清除h1的默认margin：<h1>自带的margin会挤占空间，设置margin:0保证25%的宽度分配准确
• 简化fxFlex写法：fxFlex="25"等价于fxFlex="25%"，FlexLayout会自动识别百分比单位

额外检查项 #

如果还是有布局问题，可以检查：

• 确保@angular/flex-layout的版本和Angular 5兼容（Angular 5对应flex-layout的版本大概是2.x，你可以在package.json里确认）
• 有没有自定义样式覆盖了mat-toolbar或FlexLayout的默认样式

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