Angular 中间元素包裹时如何还有间隔

下面是我创建的一个演示：

复制步骤：

“在新窗口中打开”并将其拖动到全尺寸

拖动右边框并使窗口变小

当中间元素开始换行->问题时

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

当中间元素换行时，如何使空间“左和右”相同

---

@Akber Iqbal的建议已经做得很好了

如何使元素以下面的样式（绿色）进行包装？

使用现有的，在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>

lol_1
lol_1
lol_1

很有效，谢谢。有没有一种方法可以让包装2。3.（以此类推）行元素直接从第一行元素下面开始。如果不清楚，我将添加图像。请添加图像。。。你的意思是每行有一个按钮吗？在我的问题中添加了一个foto我不认为我们可以用一个自由流动的CSS来获得它[意味着屏幕可以像我们想要的那样大或一样小]。。。但是，作为一种解决方法，我们可以限制特定行的按钮数为X，然后一旦宽度减小，我们将减少可以存在的按钮数…感谢您迄今为止的帮助。你的解决方案已经大大改善了我的问题。我再等一会儿，等另一个解决办法。然后可以把这个标记为答案。