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

Question

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

由于我使用的是角形材料。看来我需要使用此flex-layout库而不是bootstrap，但是问题是我无法使其正常运行，因此欢迎任何帮助。

*我不是要寻找响应能力，如果我能获得这种布局，就像图像将对我有很大帮助。

Answer 1

好，安装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"赋予第一格20％的宽度。 fxFlex（没有参数）只会在元素之间平均分布高度或宽度。