这是我创建的一个演示:https://stackblitz.com/edit/flex-layout-angular-material-fgconc
重现步骤:
当它开始包裹时,剩下的空间消失了,所有空间都在右边。
当中间元素换行时,如何“左右”使用相同的空间?
@Akber Iqbal的建议style="text-align:center"
已经做得很好。
使用现有的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>