`fxLayoutAlign` 的行为有何不同？

Question

我有 3 个元素我想 space 同样地使用 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>

有以下输出

我的问题

我希望这两个代码的工作方式相同......那么为什么第二个代码使 3 个按钮堆叠在一起？

Answer 1

您在 mat-toolbar-row 中使用的 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>

Answer 2

<p> 1 code</p>

<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>

<p> 2  code</p>

<mat-toolbar-row fxShow.ls-sm fxHide.gt-sm  >
      <div fxlayout="row" fxFlex 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>

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

`fxLayoutAlign` 的行为有何不同？

whay `fxLayoutAlign` behave diffrently?

html

angular

angular-flex-layout

我的问题