angular material flex on header is not working-CodePudding

I have an issue on CSS with the header (mat-toolbar). I try put "A" on the left side and "B" on the right side.

What is working:

<mat-toolbar>
  <mat-toolbar-row>
  A
   <span ></span>
  B
  </mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-container >
...
</mat-sidenav-container>
<app-footer></app-footer>

I tryed now to move now A and B in a component as header.

<mat-toolbar>
  <mat-toolbar-row>
  <app-header></app-header>
  </mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-container >
...
</mat-sidenav-container>
<app-footer></app-footer>

the header template:

A
<span ></span>
B

The header looks like following picture:

in style.scss

.flex-spacer {
  flex: 1 1 auto;
}

some idea way flex is not working here?

CodePudding user response：

When you move inside the a component two things happen

The parent is now no longer mat-toolbar-row and has the display rule value as block
flex-spacer CSS is in your component style, so it will not update any other components that have the flex-spacer class

To solve the problem

Move .flex-spacer { flex: 1 1 auto; } to styles.css
And in the parent component CSS add these rules app-header { flex-grow: 1; display: flex; }