中间元素换行时如何仍然留有间隔

Question

这是我创建的演示：https://stackblitz.com/edit/flex-layout-angular-material-fgconc

复制步骤：

1. “在新窗口中打开”并将其拖动到完整大小。
2. 拖动右边框并缩小窗口。
3. 当中间元素开始换行时->问题

开始包装时，左边的空间消失了，所有的空间都在右边。

当中间元素环绕时，我怎么能在左和右有相同的空格？

---

@Akber Iqbal的建议style="text-align:center"已经做好了。

怎么可能用下面的样式（绿色）包裹元素？

Answer 1

使用现有的stackblitz，在app.component.html中进行一项更改，只需将 style =“ text-align：center” 添加到第二个div

最终 app.component.html 为：

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