How to still have space-between when middle element wraps

Question

here is a demo i've created: https://stackblitz.com/edit/flex-layout-angular-material-fgconc

steps to reproduce:

1. "Open in New Window" and drag it to full size.
2. drag right border and make window smaller.
3. when the middle element starts wrapping -> problem

When it starts wrapping the space left is gone and all space is on the right.

How can I have the same space "left and right" when the middle element wraps?

---

@Akber Iqbal 's suggestion style="text-align:center" already does a good job.

How ever is it possible to have the elements wrap in the below style (green)?

Answer 1

Using your existing stackblitz, make one change in your app.component.html, just add: style="text-align:center" to the 2nd div

Final app.component.html to be:

<div fxLayout = "row nowrap" fxLayoutAlign = "space-evenly center">
  <img fxFlex="0 0 auto" fxFlexAlign="center" style="height: 3em" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">

  <div fxLayout = "row wrap" fxFlex = "0 1 auto" style="text-align:center">
  <app-many-buttons [N]="10"></app-many-buttons>
  </div>

  <div fxLayout = "row nowrap" fxFlex = "0 0 auto">
      <button mat-button class="materialIconButton">lol_1</button>

      <button mat-button class="materialIconButton">lol_1</button>

      <button mat-button class="materialIconButton">lol_1</button>
  </div>
</div>