代码之家  ›  专栏  ›  技术社区  ›  nontechguy

使用fxLayout调整div的大小以适应内容并在父级中居中对齐

  •  0
  • nontechguy  · 技术社区  · 7 年前

    enter image description here

    如何使用fxLayout在Angular中实现如上图所示的布局?

    这是我的代码示例和结果的图像。我的red div默认为蓝色div的宽度,项与左对齐,右边的填充使结果偏离中心。

    <div fxLayout="row" fxLayoutAlign="center center">
        <div class="blue" fxFlex="80%" fxLayout="row">
            <div class="red" fxLayout="row" fxLayoutWrap fxLayoutAlign="start center">
                <app-item *ngFor="let item of items.all" [item]="item"></app-item>
        </div>
    </div>
    

    enter image description here

    1 回复  |  直到 7 年前
        1
  •  0
  •   nontechguy    7 年前

    我正在为感兴趣的人探索另一种选择。 https://brianflove.com/2017/05/03/responsive-angular/

        2
  •  0
  •   Dharman vijay    5 年前

    我刚开始使用的时候碰巧遇到了同样的问题 @angular/flex-layout 最近。它是 fxLayoutWrap fxLayout="row wrap" 而不是 因为它已经被移除了。

    推荐文章