Html 什么‘fxLayoutAlign’表现不同？

我有3个元素，我想使用

Angular Flex Layout

将其平均分隔开，下面的代码就是我想要的

第一个工作代码

<mat-toolbar-row fxShow.ls-sm fxHide.gt-sm fxLayoutAlign="space-between center">
   <button mat-button routerLink=""  >home</button>
   <button mat-button routerLink="/post" >   post</button>
   <button mat-button routerLink="about-us"> contact us</button>
</mat-toolbar-row>

<mat-toolbar-row fxShow.ls-sm fxHide.gt-sm  >
      <div fxlayout="row" fxLayoutAlign="space-between center" >
        <button mat-button routerLink=""  >home</button>
        <button mat-button routerLink="/post" >   post</button>
        <button mat-button routerLink="about-us"> contact us</button>
      </div>
 </mat-toolbar-row>

家
邮递
联系我们

具有以下输出

第二个不工作代码

<mat-toolbar-row fxShow.ls-sm fxHide.gt-sm fxLayoutAlign="space-between center">
   <button mat-button routerLink=""  >home</button>
   <button mat-button routerLink="/post" >   post</button>
   <button mat-button routerLink="about-us"> contact us</button>
</mat-toolbar-row>

<mat-toolbar-row fxShow.ls-sm fxHide.gt-sm  >
      <div fxlayout="row" fxLayoutAlign="space-between center" >
        <button mat-button routerLink=""  >home</button>
        <button mat-button routerLink="/post" >   post</button>
        <button mat-button routerLink="about-us"> contact us</button>
      </div>
 </mat-toolbar-row>

家
邮递
联系我们

具有以下输出

我的问题

---

我希望这两个代码的工作原理是一样的……那么为什么第二个代码将3个按钮堆叠在一起呢？

您在

mat工具栏行中使用的
div
元素没有父元素的全宽。因此，您需要将
fxFlex
添加为指令，使其宽度为父级的100%

<mat-toolbar-row fxShow.ls-sm fxHide.gt-sm>
  <!-- ADD fxFlex to div -->
    <div fxFlex fxlayout="row" fxLayoutAlign="space-between center">
        <button mat-button >home</button>
        <button mat-button >   post</button>
        <button mat-button > contact us</button>
    </div>
</mat-toolbar-row>


家
邮递
联系我们
在
mat工具栏行中使用的
div
元素没有父元素的全宽。因此，您需要将
fxFlex
添加为指令，使其宽度为父级的100%

<mat-toolbar-row fxShow.ls-sm fxHide.gt-sm>
  <!-- ADD fxFlex to div -->
    <div fxFlex fxlayout="row" fxLayoutAlign="space-between center">
        <button mat-button >home</button>
        <button mat-button >   post</button>
        <button mat-button > contact us</button>
    </div>
</mat-toolbar-row>


家
邮递
联系我们
1代码

家
邮递
联系我们
2代码

家
邮递
联系我们


您需要在第二个代码分区中添加fxFlex指令。
1代码

家
邮递
联系我们
2代码

家
邮递
联系我们


您需要在第二个代码分区中添加fxFlex指令。
您是否可以共享您使用的
元素请
是角材料的一部分您可以共享
您使用的元素请
是角材料的一部分