时间戳

首页 > 解决方案 > 如何使用 Angular Flex-Layout 实现这样的布局

angular - 如何使用 Angular Flex-Layout 实现这样的布局

问题描述

我如何使用 Angular Flex-Layout 实现这种布局？ 所需的布局

因为我使用的是棱角材料。看来我需要使用这个 flex-layout 库而不是引导程序，但问题是我无法让它工作，所以欢迎任何帮助谢谢。

*我不是在寻找响应能力，如果我能像图像一样得到这个布局，它会对我有很大帮助。

标签： angularlayoutangular-materialangular-flex-layout

解决方案

好吧，安装flex-layout。

将布局模块导入您的项目/模块：

import {FlexLayoutModule} from '@angular/flex-layout';
...
@NgModule({
 imports: [
   ...
   FlexLayoutModule,
   ...
 ]
})

最后，在 HTML 中：

<div fxLayout="row" style="height: 100%">
  <div style="background-color: red" fxFlex="20"></div>
  <div fxLayout="column" fxFlex>
    <div style="background-color: blueviolet" fxFlex></div>
    <div style="background-color: cornflowerblue" fxFlex></div>
    <div style="background-color: darkgray" fxFlex></div>
  </div>
</div>

fxFlex="20"给第一个 div 20% 的宽度。fxFlex没有参数只会在元素之间均匀分布高度或宽度。

推荐阅读