whay `fxLayoutAlign` behave diffrently?

Question

I have 3 elements I would like to space it equally using Angular Flex-Layout and the following code do what I want

first working code

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

has the following output

second not working code

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

has the following output

My question

I expect the two code will work the same … So why the second code make the 3 button stacked together?

Answer 1

The div element you used inside mat-toolbar-row has no full width of parent element. So you need to add fxFlex as directive so it's 100% width of parent.

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