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

Question

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

​

因为我使用的是角度材料。似乎我需要使用这个flex布局库而不是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"给了第一个div 20%的宽度。没有参数的fxFlex只是将高度或宽度均匀地分布在元素之间。