中间元素包裹时如何仍然有空格

问题描述 投票:0回答:1

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

重现步骤:

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

当它开始包裹时,剩下的空间消失了,所有空间都在右边。

当中间元素换行时,如何“左右”使用相同的空间?


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

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

enter image description here

angular flexbox angular-flex-layout
1个回答
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>
© www.soinside.com 2019 - 2024. All rights reserved.