Angular 5 Material Flex-Layout中fxLayoutAlign="space-evenly center"失效求助

我来帮你搞定这个布局问题！你用了fxLayout="row" fxLayoutAlign="space-evenly center"却没得到预期效果，大概率是因为表单输入框（或它们的容器）没配置好flex弹性属性，导致容器没有足够可用空间来分配均匀间距。下面是具体的修复方案：

核心修复步骤 #

1. 给输入框容器添加弹性属性 #

在每个表单输入框的外层容器上加上fxFlex指令，让子元素能在flex行中合理分配空间。同时搭配fxLayoutGap来控制元素间的间距，比单纯依赖space-evenly更可控：

<div fxLayout="row" fxLayoutAlign="space-evenly center" fxLayoutGap="1rem">
  <div fxFlex>
    <mat-form-field appearance="fill">
      <mat-label>输入框1</mat-label>
      <input matInput placeholder="请输入内容">
    </mat-form-field>
  </div>
  <div fxFlex>
    <mat-form-field appearance="fill">
      <mat-label>输入框2</mat-label>
      <input matInput placeholder="请输入内容">
    </mat-form-field>
  </div>
  <div fxFlex>
    <mat-form-field appearance="fill">
      <mat-label>输入框3</mat-label>
      <input matInput placeholder="请输入内容">
    </mat-form-field>
  </div>
</div>

fxFlex会让每个子容器平分可用宽度，再结合fxLayoutAlign的配置，就能实现横向均匀分布且垂直居中的效果。

2. 让Material输入框占满容器宽度（可选） #

如果mat-form-field默认宽度不符合预期，可以添加CSS让它占满所在容器：

mat-form-field {
  width: 100%;
}

这样每个输入框会撑满父容器，布局会更规整统一。

3. 排查样式冲突 #

有时候父容器的固定宽度、子元素的margin/padding会挤占flex空间，导致space-evenly失效。可以检查一下全局样式或父容器的样式设置，确保flex容器有足够的可用空间。

简单来说，只要让flex子元素具备弹性（通过fxFlex），再配合合理的间距控制，就能轻松实现你想要的同级输入框均匀分布效果啦！

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