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

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

css3 angular html

0

nontechguy · 技术社区 · 7 年前

如何使用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>

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" 而不是因为它已经被移除了。