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

标签 html angular css

enter image description here

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

这是我的代码示例和结果图像。我的红色 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

最佳答案

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

关于html - 使用 fxLayout 调整 div 大小以适应内容并在父级中居中对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53718406/

相关文章:

angular-cli 在同一台计算机上的不同版本

javascript - 如何使用 HTML Canvas 在图像上绘图?

javascript - 根据 JavaScript 中的数组更改 div 背景颜色?

javascript - (由设计更改修复)在响应式设计站点上使用 jQuery 计算高度以保持两列等高

javascript - 使用 JQuery $(...).val (""清除包含 5 个或更多字段的表单时,IE11 崩溃)

html - 没有js/图像的输入元素的CSS3圆 Angular

html - 照片集底部和边框之间的空白

html - 使用 url() 作为内容的值时无法调整图像大小

javascript - Angular2 - html中的动态变量

angular - nginx 反向代理,用于在 nginx 上运行的 Angular 应用程序