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

Question

如何使用 Angular Flex-Layout 实现此布局？

因为我正在使用 angular material。看来我需要使用这个 flex-layout 库而不是 bootstrap 但问题是我无法让它工作，所以欢迎任何帮助谢谢。

*我不是在寻找响应能力，如果我能得到与图像一样的布局，那将对我有很大帮助。

Answer 1

将布局模块导入到您的 project/module:

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 没有参数只是在元素之间均匀分布高度或宽度。

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

How to achieve such layout with Angular Flex-Layout

layout

angular-material

angular-flex-layout

angular